Question

如何编写这样的CSS布局？

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

其中：

整个布局横跨整个窗口
'header'和'fill'是两个div，一个在另一个
'header'不具有固定高度（其内容可能会更改）
'fill'填满'header'留下的所有剩余空间，并在'header'调整大小时调整大小

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

由于

Answer 1

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

这是一个粘性页脚解决方案的 jsFiddle demo ，我把它放在一起，以及必要的jQuery代码，使布局在IE7中运行。如果您不需要IE7支持，请忽略Javascript代码。由于您的特定情况不需要页脚，因此也要省略页脚元素。最后:-p #header元素在CSS中被赋予固定的高度。从CSS中删除行height: 70pt;以使标题高度变量。

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

Answer 2

所以你将开始使用容器

<div id="contain">
</div>

然后我们将添加页眉和页脚以及样式

<div id="contain">
   <div id="header">
      Content from Header
   </div>
   <div id="fill">
      Content from Fill
   </div>
</div>
#contain {
width:100%;
}
#header{
width:100%;
}
#fill{
width:100%;
min-height:100px;
}

填充将自动调整为标题的高度

http://jsfiddle.net/burn123/gWkm8/

Answer 3

而不是尝试让内容跨越窗口的其余部分而不是标题，而是使主体覆盖窗口，样式，并让您的内容变为可变大小。

我为你设置了一个简单的jsfiddle：http://jsfiddle.net/xeP5M/

<div id="container">
    <div id="header">

    </div>
    <div id="fill">
        this is where content goes        
    </div>
</div>

和CSS：

html, body { height: 100%; }
div { width: 100%; }

#container { background: #ff0; min-height: 100%; position: relative; }
#header { background: #f0f; height: 200px; }
#fill { background: #0f0; min-height: 100%; }

干杯。

CSS流体垂直布局

3 个答案: