从我的研究，这似乎是一个绝对经典的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，并为答案是跨浏览器的防弹。
解决方法
这个版本将工作在所有最新的浏览器和ie8如果你有modernizr脚本(如果不只是更改页眉和页脚到div)：
http://jsfiddle.net/naqE6/1/
html
<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>
css
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;}
