浏览器窗口缩小后,滚动条拉至右边显示空白

问题描述:
当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白．

原因：
通过控制台的查看，可得知，由于固定了子元素的宽度，当浏览器窗口缩小后，将导致子元素宽度大于父元素的宽度，子元素将父元素撑开所致，如图：

解决方案：
第一种：在父元素上添加样式:

style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px"

由于IE6不支持min、max,为了兼容,故使用width:expression¹(document.body.clientWidth <= 1200? ‘1200px’: ‘auto’);

第二种：修改子元素样式的固定宽度,将width: 1170px;改为max-width: 1170px;

第三种：相应式布局，随着浏览器宽度的变化，调整子元素宽度和布局，避免撑开父元素宽度的情况出现。

---

1. expression将CSS属性和Javascript脚本关联起来，是动态设置CSS属性的强大方法。但expression对浏览器的资源要求高（因为它的计算频率高）。在性能优化方面，可以将第一次计算出的结果赋值给指定的样式属性，并用这个属性代替expression。但仍存在很多问题，所以尽量不使用。 ↩︎