我正在尝试设计一个具有几个页眉、一些主要内容和一个页脚的页面布局。
我想在主要内容中使用 jQuery UI 选项卡小部件并在其周围有边框,因此 div 必须填充页眉和页脚之间的所有空间,但我还希望内容在需要时扩展,从屏幕底部和出现一个滚动条,因此我可以向下滚动并查看它。
实际上,我希望内容 div 的最小高度是页眉和页脚之间的距离,但允许它扩展。
我已经实现了Sticky Footer方法,如果我不希望我的主要内容周围有边框,它会很好地工作。在这个jsFiddle示例中,带有红色 2px 边框的 div 最初需要填充页面,当您单击“添加东西”按钮添加更多内容时,它需要向下推页脚并显示滚动条。
这就是我想要实现的目标:
...使用这些规则:
- 内容需要有边框。
- 内容需要从填充页眉和页脚之间的空间开始。
- 内容需要超出页面底部,显示滚动条。
- 随着内容的增长,页脚需要向下推。
- 仅使用 CSS,这样如果内容动态变化,一切都会自动调整。
- 仅在现代浏览器中工作,我对支持 IE<8 不感兴趣。
我试过了:
- 绝对定位,但这会将内容固定为屏幕大小,并且不允许它超出底部。
- jQuery 定位,但这感觉太像 hack,而且似乎是修复它的坏方法。
- 在各个地方使用
height: 100%
andmin-height: 100%
,但似乎没有达到我想要的效果。 - 查看围绕同一问题的其他Stack Overflow问题,但似乎没有一个能够解释超出屏幕底部的内容。