CSS min-height 100％with multiple divs [英] CSS min-height 100% with multiple divs
问题描述
好的。我试图得到一个页面显示100％的视口的高度，但捕获是页面有多个div，并不总是嵌套。我一直在浏览多个问题和其他网站，我找不到一个适合我的需要的答案。
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
我目前的布局如下：
<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％的视口，然后页脚被按下80px（因为标题是80像素），因此完整页面最终为100％+ 160像素（两个80像素的div）。
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
有什么想法吗？干杯。
推荐答案
您可以使用简单的 display：table 属性。
You can do this with simple display:table property.
检查：
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;
}
这篇关于CSS min-height 100％with multiple divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
