我正在尝试创建一个将自动适应高度的应用程序页面。以下是页面中使用的 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;
}
我的问题是，整个页面只占用了页面高度的一半，在页脚下方留下了尴尬的空间，
问题:如何让内容自动适应页面的高度？
最佳答案
Click for Demo
设置 Html 和 body 标签 height:100%; 你可以给 maring:0; 和
padding :0; 到 body 标签
只需给包装器 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
及其输出，它在浏览器调整大小时工作正常
关于css - HTML5 页面 100% 高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11604363/