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

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

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

Answer 2

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

组

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

如何获得高于固定宽度div的100％宽度div？

2 个答案: