CSS 流体垂直布局

Question

如何编写这样的 CSS 布局？

+---------+
| header  |
+---------+
|         |
| fill    |
|         |
+---------+

哪里:

• 整个布局跨越整个窗口
• 'header'和'fill'是两个div，一个在另一个下面
• 'header' 没有固定高度(它的内容可能会改变)
• 'fill' 填充 'header' 剩余的所有空间，并在 'header' 调整大小时调整大小

我认为这是一个简单的解决方案，但我无法理解它。

谢谢

Answer 1

您正在寻找的内容与“粘性页脚”所需的 CSS 类似，因为您想要填充所有剩余的垂直空间，但仍允许它根据需要增长。有很多棘手的解决方案，但大多数在版本 8 之前不受 IE 支持(那时 display: table; 在 IE 中成为可能)。

这是一个 jsFiddle demo 我不久前整理的粘性页脚解决方案，以及使布局在 IE7 中工作所需的 jQuery 代码。如果您不需要 IE7 支持，只需省略 Javascript 代码即可。由于您的特定情况不需要页脚，因此也可以省略页脚元素。最后 :-p #header 元素在 CSS 中被赋予了固定的高度。从 CSS 中删除 height: 70pt; 行，使标题高度可变。

在不久的将来，CSS Flexible Box模型将使这种布局更容易，但目前浏览器支持仍然非常少。在它变得更广泛可用之前，我建议改用 display: table; 格式。