HTML5页面100％高度问题 [英] HTML5 page 100% height Issue
本文介绍了HTML5页面100％高度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个将自动适应高度的应用页面。
< div id =mainrole =main>
< header class =header>
< div class =allPageHeaderImg>< / div>
< div class =logo>< img src =images / logo-viva.pngalt =VIVAGREL Logo/>< / div>
< / header>
< section class =allContent>
< div class =button-links-subpg>
< ul class =buttons>
< li>< a href =＃>< img src =images / graceButton.pngalt =cardiac-button/>< / a>< / li>
< li>< a href =＃>< img src =images / timiButton.pngalt =cardiac-button/>< / a>< / li>
< / ul>
< / div>
< / section>
< footer id =footer>
< div id =footerBg>
< div class =footer-links>
< ul>
< li>< a href =index.html>首页< / a>< / li&
< li>< a href =index.html>返回< / a>< / li>
< / ul>
< / div>
< / div>
< / footer>
< / div>
使用的CSS
html {
height：100％！important;
width：100％;
padding：0;
margin：0;
}
body {
margin：0;
padding：0;
width：100％;
height：100％！important;
}
#main {
height：100％;
margin：100％;
margin：0 auto;
padding：0;
background：#fff;
}
.header {
height：145px;
width：100％;
background：url（../ images / header-repbg-320.png）left top repeat-x;
display：block;
display：inline-block;
}
.allContent {
width：100％;
border：0实心绿色;
height：100％;
min-height：100％;
vertical-align：middle;
display：block;
display：inline-block;
}
#footer {
background：url（../ images / footer-repbg-320.png）left left repeat-x;
height：90px;
width：100％;
display：block;
display：inline-block;
}
我的问题是，整个页面只消耗一半的高度页面在页脚下方留下一个尴尬的空间，
问题：如何使内容自动适应页面的高度？
解决方案
和工作示例
并且其输出，它在浏览器调整大小
I am trying to create a App page which will auto fit to the height. following in the HTML code used in the page
<div id="main" role="main">
<header class="header">
<div class="allPageHeaderImg"></div>
<div class="logo"><img src="images/logo-viva.png" alt="VIVAGREL Logo" /></div>
</header>
<section class="allContent">
<div class="button-links-subpg">
<ul class="buttons">
<li><a href="#"><img src="images/graceButton.png" alt="cardiac-button" /></a></li>
<li><a href="#"><img src="images/timiButton.png" alt="cardiac-button" /></a></li>
</ul>
</div>
</section>
<footer id="footer">
<div id="footerBg">
<div class="footer-links">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Back</a></li>
</ul>
</div>
</div>
</footer>
</div>
The CSS used
html {
height:100%!important;
width:100%;
padding:0;
margin:0;
}
body {
margin:0;
padding:0;
width:100%;
height:100%!important;
}
#main {
height:100%;
margin:100%;
margin:0 auto;
padding:0;
background:#fff;
}
.header {
height:145px;
width:100%;
background:url(../images/header-repbg-320.png) left top repeat-x;
display:block;
display:inline-block;
}
.allContent {
width:100%;
border:0 solid green;
height:100%;
min-height:100%;
vertical-align:middle;
display:block;
display:inline-block;
}
#footer {
background:url(../images/footer-repbg-320.png) bottom left repeat-x;
height:90px;
width:100%;
display:block;
display:inline-block;
}
My problem is, the whole page is only consuming half of the height of the page leaving a awkward space below footer,
Question: How to make the contents auto fit itself to the height of the page?
解决方案
Click for Demo
Set Html and body tag height:100%; and you can give maring:0; and
padding :0; to body tag also
just give wrapper div height:100%;
HTML
<html>
<body>
<div id="Wrapper">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Css
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
#Wrapper{
text-align:center;
margin: auto;
height:100%;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color:orange;
}
#header{
height:10%;
background-color:yellow;
}
#content{
height:80%;
background-color:#4072b4;
}
#footer{
height:10%;
background-color:green;
}
With out setting padding to body and html tag background image will not work
Not working example and Working Example
And its output, It works fine on browser resizing
这篇关于HTML5页面100％高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
