HTML5页面100%高度问题
HTML5页面100%高度问题
提问于 2012-07-23 06:05:57
我正在尝试创建一个应用程序页面，这将自动适应高度。下面是页面中使用的HTML代码
<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>使用的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 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;
}我的问题是，整个页面只占用了页面高度的一半，在页脚下留下了一个尴尬的空间，
问:如何让内容自动适应页面的高度？
回答 2
Stack Overflow用户
发布于 2014-05-03 15:23:04
Click for Demo设置Html和body标签height:100%;，您可以给body标签提供maring:0;和padding :0;，也可以只给包装器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;
}
如果不设置正文和html标记的填充，背景图像将不起作用
Not working example和Working Example
Your question's fiddle
和它的输出，它在浏览器调整大小上工作良好。
Stack Overflow用户
发布于 2012-07-25 11:08:06
你差一点就成功了。我简单地修改了前三个选择器的CSS，如下所示：
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#main {
margin: auto;
min-height: 100%;
background: #ccc;
width: 960px;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
}我只是在#main选择器中添加了背景、宽度和边框，以显示它的工作情况。它将在没有这些属性的情况下工作，但是边距和最小高度是必需的。您还会注意到!important值是不必要的，作为一种最佳实践，应该主要用于解决继承冲突。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11604363
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号