好的。我试图让页面显示 100% 的视口高度，但问题是页面有多个并不总是嵌套的 div。我一直在浏览多个问题和其他网站，但找不到适合我需要的答案。
我目前的布局如下：
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
由于页眉和页脚各为 80px，我试图让内容 div 填充视口的其余部分。我尝试将 html、body 和容器 div 设置为“height:100%”，然后将内容 div 设置为 min-height:100% 和 height:100%，但这只会使 div 扩展到 100%视口，然后页脚向下推 80 像素（因为页眉为 80 像素），因此整个页面最终为 100% + 160 像素（两个 80 像素的 div）。
有任何想法吗？干杯。
你可以用简单的方法做到这一点display:table财产。
检查一下：
http://jsfiddle.net/HebB6/1/ http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
