这适用于 Chrome： http: //jsfiddle.net/EtNgv/我想让它在 IE 和 Firefox 中工作。
对其他类似问题的回答说这是不可能的——但没有提到它在 Chrome 中是可能的——所以我希望有人可以调整我在这里的内容以使其在 FireFox 和 IE10 中工作。
期望的结果：
占据 100% 高度的容器 div - 但仅此而已。它包装了页眉和页脚 div，其高度由其内容决定。页脚 div 始终与页面底部齐平。在页眉和页脚之间延伸的中间 div。如果它的内容溢出它应该滚动。
图片：http: //i.stack.imgur.com/e7ddc.png
当前实施：
CSS：
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML：
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
这在 Chrome 中有效，但在 IE 和 Firefox 中，如果内容大于中间 div，则容器的高度大于 100%，并且页面获得滚动条。