在纯HTML / CSS中使用静态高度的页眉和页脚拉伸垂直布局

Question

bo建立垂直布局的最简单方法是，页眉和页脚具有静态高度，而中心占据所有可用空间（并调整为窗口高度）。

header
------

center


------
footer

感谢帮助

ps绝对定位对我来说不是一个选择。

Answer 1

我相信这就是您要寻找的
jsFiddle

使用margins将中间<div>的margin-top和margin-bottom设置为-50px ，或者设置所需页眉和页脚的相应高度。

如果要将内容添加到页面的中间部分，也可以使用此（相对hacky）方法。 jsFiddle

Answer 2

jacktheripper的答案确实有效，但我不建议这样做！ 跨浏览器兼容性可能不仅仅如此。 想想看Ryan Fait的“ Sticky Footer”。 可以在这里找到。 还有另外一个，即“ CSS Sticky Footer” ，但我还没有使用它。 应该工作相对相同，并且您不需要“ push div”。 不过，请务必阅读此页面上的“已知问题”！