css之缩小窗口，网页右侧显示白色的bug

假如有如下页面 

<div class=”parent” style=”width: 100%; background-color: #f00;”>

    <div class=”child” style=”width: 1400px; background: url() no-repeat;”>

        ….省略若干层

    </div>

</div>

 上面写的很清楚，想实现一个和浏览器等宽的div，parent，在该div里实现一个固定宽度为1400像素的div，child 当浏览器窗口宽度大于1400px时，显示很正常，但是当浏览器宽度小于1400px时，出现了水平滚动条，拖动滚动条发现，右侧的parent居然变成了白色，为什么会这样呢？可能你会说，我不是设置parent宽度和浏览器等宽了么，为什么还会出现这种问题，其实里面的缘由很简单，由于你设置了child的宽度为固定值1400px，当浏览器的宽度小于这个值时，实际parent元素并未撑到1400px，而是按照自己设置的浏览器可视宽度和min-width属性中的最大值进行设置，此时计算的结果就会出现偏差，也就是你看到的为什么parent的宽度是当前可视窗口的宽度，拖动滚动条右侧全部变白了，那么怎么修改呢？很简单

<div class="parent" style="min-width: 1400px; background-color: #f00;">

    <div class="child" style="width: 1400px; background: url() no-repeat;">

        ....省略若干层

    </div>

</div>

如果你body下有很多层，你不妨可以将body设置一下min-width