假如有如下页面
<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