-3

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

这是交易。

我的页面顶部有一个 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 填充整个宽度？

谢谢您的帮助。

4

2 回答 2

1

设置max-width: 900px;为 on#middle或min-width: 900pxon#top

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

于 2013-10-02T19:22:36.783 回答
0

那是因为第一个 div 占据了身体的 100%，所以女巫可以小于 900px。

放

#top {
height:100px;
background:red;
width: 100%; /*Not needed - this is the default behavior*/
min-width: 900px; /*set this*/
}
于 2013-10-02T19:22:42.723 回答