2

如何编写这样的 CSS 布局？

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

在哪里：

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

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

谢谢

4

3 回答 3

3

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

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

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

于 2013-01-04T06:39:04.090 回答
1

而不是试图让内容跨越窗口的其余部分，而不是标题，而是让主体覆盖窗口，设置样式，并让你的内容是可变大小的。

我为你设置了一个简单的 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%; }

干杯。

​</p>

于 2013-01-04T05:06:19.533 回答
1

所以你将从一个容器开始

<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/

于 2013-01-04T04:34:46.507 回答