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

Question

我正在尝试垂直堆叠一些具有“红色”背景的 div，这些 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 来解决问题

问题:为什么首先会发生这种奇怪的行为？固定宽度的 child 是否以某种方式逃避了正常的流程，如绝对定位的 div 或 smth.？

谢谢你的意见

Answer 1

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