转载 | 缩小浏览器窗口右边出现空白

本文引自：http://blog.csdn.net/gyy93/article/details/70905405

 

布局做好的页面不会因为缩小浏览器窗口而右边出现空白？


“发现现在缩小窗口，底部出现进度条，滑动至右边，就出现空白”这个问题是个十分常见且容易忽略的bug。


原因是因为出现空白的元素设置了宽度100%，缩小窗口相当于减小了宽度值，那么为什么出现滚动条呢？


是因为页面中至少有一个元素a的width大于窗口的width，导致把页面撑开，出现了滚动条，而此时那个width：100%的元素宽度等于窗口宽度且小于元素a的宽度，所以右侧的空白长度=a的宽度-窗口宽度。

所以你有2种解决办法。

 

1即然滑动了滚动条，才会发现你原来比之前短了许多，那么就干脆不让滚动条出现！将不良后果扼杀在摇篮之中。
body设置overflow：hidden，让你丫撑页面，这样做的好处是用户为了看全，不得不放大窗口，那么100%的那位元素，就不会有空白了。


2习惯方法，给100%那个元素的父元素设置min-width=撑开页面那个元素的宽度，这样他们的宽度就保持一致了，空白就不会出现了。但是min-width在ie6以下不被支持怎么办？其实，现在还用ie6以下的人很少了。如果不想放弃这些用户，唯一的方法，用js做判断，与其这么麻烦还是选方法一最实在噢。