从我的研究来看，这似乎是一个绝对classic 的CSS问题，但我找不到一个明确的答案——事实就是如此.
如何将内容div设置为100%占用正文高度，减go 固定高度页眉和页脚占用的高度？
<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，并为答案是跨浏览器防弹.
此版本可以在所有最新的浏览器和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