如何在固定宽度 div 之上获得 100% 宽度的 div？

Question

我有一个看起来很简单的问题。

这是交易。

我的页面顶部有一个 div，它占据了整个宽度。在此之下，我想放置一个在中心对齐的固定宽度的 div。

类似这样的：

<div id="top">
        <p>This is the top wrapper</p>
</div>
<div id="middle">
         <p>This is the fix width wrapper</p>
</div>

样式将是

#top {
    height:100px;
    background:red;
    width: 100%;
    }

#middle {
    width:900px;
    margin:auto;
    height: 300px;
    background:green;
    color:#fff;
    }

演示： http://jsfiddle.net/JeroenGerth/zeZ4k/2/

如果浏览器窗口大于 900 像素，则一切正常。但是当您的窗口小于 900 像素时，就会出现问题。你会得到一个水平滚动条。这似乎是合乎逻辑的，因为#middle div 是 900 像素宽。但是当你向右滚动时，你会看到顶部的 div 并没有填满屏幕的整个宽度。它只会填充您在向右滚动之前可以看到的空间。您可以在页面的右上角看到一些白色的剩余空间。

我做错了什么或忽略了什么？我不能为#middle div 使用固定宽度吗？ :-( 当窗口需要滚动条时，如何让顶部 div 填充整个宽度？

感谢您的帮助。

Answer 1

在#middle 上设置max-width: 900px; 或在#top 上设置min-width: 900px

http://jsfiddle.net/zeZ4k/3/

Answer 2

因为第一个 div 占了 body 的 100%，witch 可以小于 900px。

设置

#top {
height:100px;
background:red;
width: 100%; /*Not needed - this is the default behavior*/
min-width: 900px; /*set this*/
}