垂直固定和流畅的布局，没有浏览器滚动条

Question

我希望我的页面有像图像中那样的行为。 100％的盒子有浏览器屏幕的高度，自动盒子有一个最小高度，比方说100px，所以，我喜欢的是自动盒增加/减少，如果它的高度低于100px，那么创建滚动条在自动框中而不是浏览器（如图中所示）。

编辑： http://jsfiddle.net/erwingo/gMEBn/ 问题是，当您调整窗口大小时，会出现滚动条，因为--div class =“content” - 似乎没有减少。

对不起，如果我的英语不够好。

Answer 1

您可以指定屏幕百分比的元素高度。然后提供您的内容区overflow: auto;

另一种选择，因为页眉和页脚的高度似乎是静态的，就是将内容设置为position:absolute; top: totalOfHeadersHeight; bottom: footerHeight; overflow: auto;然后它将为您提供内容区域，使其具有自己独立的滚动区域。 / p>