标签 css
<分区>
根据我的研究，这似乎是一个绝对经典的 CSS 问题，但我找不到明确的答案 - 所以 StackOverflow 就是这样。
如何将内容 div 设置为占主体高度的 100%，减去固定高度的页眉和页脚所占的高度？
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
我想使用纯 CSS，并且答案是跨浏览器的。
最佳答案
如果你有 modernizr 脚本，这个版本将在所有最新的浏览器和 ie8 中工作(如果不只是将 header 和 footer 更改为 divs):
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>滚动内容:Fiddle
关于css - 获取 div 占据 100% 的主体高度，减去固定高度的页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15021573/