好的。我试图让一个页面显示 100% 的视口(viewport)高度，但要注意的是该页面有多个并不总是嵌套的 div。我一直在浏览多个问题和其他网站，但找不到适合我需要的答案。
我目前的布局是这样的:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
由于页眉和页脚各为 80 像素，我试图让内容 div 填充视口(viewport)的其余部分。我试过将 html、body 和容器 div 分别设置为“height:100%”，然后将内容 div 设置为 min-height:100% 和 height:100% 但这只会使 div 扩展到 100%视口(viewport)，然后页脚被下推 80px(因为页眉是 80px)，所以整个页面最终为 100% + 160px(两个 80px div)。
有什么想法吗？干杯。
最佳答案
您可以使用简单的 display:table 属性来做到这一点。
检查这个:
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;
}
关于html - 具有多个 div 的 CSS 最小高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8264499/