我试图设计一个页面布局，它有几个页眉、一些主要内容和页脚。
我想在主内容中使用jQuery UI tabs小部件，它周围有一个边框，因此div必须填充页眉和页脚之间的所有空间，但我也希望内容在需要时展开，离开屏幕底部，出现一个滚动条，这样我就可以向下滚动并查看它。
实际上，我希望content div的最小高度是页眉和页脚之间的距离，但允许它扩展。
I've implemented方法，如果我不想在我的主要内容周围有边框的话，这个方法会非常好地工作。在这个Sticky Footer例子中，带有红色2px边框的div最初需要填充页面，当您单击“Add Stuff”按钮添加更多离开屏幕底部的内容时，它需要向下推页脚并显示滚动条。
这就是我要达到的目标：
……根据这些规则：
内容需要有边框。
内容需要从填充页眉和页脚之间的空格开始。
内容需要超出页面底部，显示滚动条。
随着内容的增长，页脚需要向下推。
只使用CSS，这样如果内容动态变化，所有内容都会自动调整。
只在现代浏览器中工作，我对支持IE我试过：
绝对定位，但这将内容固定到屏幕大小，不允许其扩展到底部。
jQuery的定位，但这感觉太像一个黑客，似乎是一个不好的方法来修复它。
在不同的地方使用height: 100%和min-height: 100%，但似乎达不到我想要的效果。
看看同一个问题周围的其他jsFiddle，但它们似乎都无法解释屏幕底部以外内容的增长。
最佳答案
我能想到的最好办法是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值，这会破坏我基于百分比的高度。
关于css - 如何使DIV填充页面而没有“position:absolute;”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14459364/