html - 在页眉和页脚之间填充 DIV，但仅此而已

Question

我怎样才能拥有一个页眉和页脚，中间有一个 MainContent div，它填满了所有可用区域，但从不延伸到页脚或页眉之外？

换句话说，填充页眉和页脚之间的剩余空间，但不再使用任何空间？

我想不出我该怎么做。我尝试了很多次但都没有成功，因为中间的内容 div 总是溢出页脚的顶部，这是我不希望发生的。我希望内容 div 仅延伸到页脚顶部，仅此而已。

我确实尝试设置 overflow: hidden;但这只是阻止了滚动条的出现，没有别的。

不允许使用 Javascript。

Answer 1

本质上，您可以将 bottom 属性设置为页脚的高度，并将 overflow 属性设置为 auto 以在必要时添加滚动条，以防止滚动条溢出。

例如，

#content {
   position: absolute;
   top: <height of header>px;
   bottom: <height of footer>px;
   overflow: auto;
}

这是一个演示: http://jsfiddle.net/bYdgj/1/