Question

我正在寻找CSS规则来设置简单的页面布局。

我想要一个具有固定高度的标题div，并从左到右完全延伸到视口顶部，

我想要一个完全填充视口其余部分的主内容div。

视口中不应该有任何区域不在这两个div之一内，并且div都不应超出视口。

当我调整浏览器大小时，这些应该保持正确。无论我在div中放入什么。（当然，假设我没有使用溢出：可见。）

看起来很简单，但我无法使其发挥作用。

Answer 1

这样的事情：http://jsfiddle.net/WqCYh/

为了不想点击链接的人，这里是HTML和CSS：

<style type="text/css">
    #header
    {
        height:100px;
        background-color:red;
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
    }

    #body
    {
        background-color:blue;
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        right:0px;
    }
</style>

<div id="header">
    Header
</div>
<div id="body">
    Body
</div>

Answer 2

您确定需要将内容div作为浏览器的高度吗？您可以将背景颜色应用于正文以模拟完整的视口范围。

无论如何这里是100％高度代码......

CSS

html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }

XHTML

<div id="content">
  <div id="header">
    <h1>Header</h1>
  </div>
  <div id="inner">
    <p>Content</p>
  </div>
</div>

CSS：标题+主要div，大小为浏览器窗口

2 个答案: