html - 当滚动条可见时，固定宽度的 div 会破坏布局

Question

我正在尝试垂直堆叠一些具有“红色”背景的 div，这些 div 占据了页面的 100%。在这些 div 中，我制作了 960px 居中的 div。发生的事情很奇怪：如果我将窗口的大小调整为小于 960 像素（以使滚动条出现） - 每个堆叠 div 的右侧都有一个间隙。您可以在此处查看实时示例：http: //jsfiddle.net/GLE7A/

基本代码：

<style type="text/css">
    * { padding: 0; margin: 0; border: 0; }
    .wmain { background: red; }
    .w960 { margin: 0 auto; width: 960px; }
</style>

<div class="wmain">
    <div class="w960">
    test
    </div>
</div>

<div class="wmain">
    <div class="w960">
    test
    </div>
</div>

解决方案很简单：只需添加 min-width:960px; 到 .wmain div 来解决问题

问题：为什么首先会发生这种奇怪的行为？固定宽度的孩子是否会以某种方式逃脱正常流程，例如绝对定位的 div 或 smth。？

谢谢你的想法

Answer 1

发生这种情况是因为您没有为 wmain div 定义任何宽度，这会使浏览器感到困惑。