当滚动条可见时，固定宽度div会中断布局

Question

我正在尝试垂直堆叠几个具有“红色”背景的div，占用100％的页面。在这些div中，我制作960px居中的div。发生的事情很奇怪：如果我调整窗口大小小于960px（滚动条出现） - 每个堆叠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定义任何令浏览器混淆的宽度。