css - 如何在没有 "position: absolute;"的情况下使 DIV 填充页面？

Question

我正在尝试设计一个页面布局，其中包含几个页眉、一些主要内容和一个页脚。

我想在主要内容中使用带有边框的 jQuery UI 选项卡小部件，因此 div 必须填充页眉和页脚之间的所有空间，而且我还希望内容在需要时展开，超出底部屏幕和滚动条出现，这样我就可以向下滚动并查看它。

实际上，我希望内容 div 的最小高度是页眉和页脚之间的距离，但允许它展开。

I've implemented Sticky Footer方法，如果我不想在我的主要内容周围添加边框，那么它会非常有效。在这个jsFiddle例如，带有红色 2px 边框的 div 需要最初填充页面，当您单击“添加内容”按钮添加更多内容时，这些内容会离开屏幕底部，它需要向下插入页脚并显示滚动条。

这就是我要实现的目标:

...使用这些规则:

• 内容需要有边框。
• 内容需要从填充页眉和页脚之间的空间开始。
• 内容需要超出页面底部，显示滚动条。
• 页脚需要随着内容的增长而下移。
• 仅使用 CSS，这样如果内容动态变化，一切都会自动调整。
• 只在现代浏览器中工作，我对支持 IE<8 不感兴趣。

我试过:

• 绝对定位，但这会将内容固定为屏幕大小，并且不会扩展到底部。
• jQuery 定位，但这感觉太像 hack 了，似乎不是修复它的好方法。
• 在多个地方使用 height: 100% 和 min-height: 100%，但似乎没有达到我想要的效果。
• 正在查看其他 Stack Overflow questions围绕着同样的问题，但它们似乎都没有解释超出屏幕底部的内容。

Answer 1

我能想到的最好的是 http://jsfiddle.net/Atjxc/6/

因为窗口的高度是可变的，所以我不得不仅使用百分比，以及绝对定位。

.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

我为主要部分添加了一个容器，当内容太长时它会显示一个滚动条。我无法放置边框，因为它们必须以 px 值设置，这会扰乱我基于百分比的高度。