【前言】
刚才写了一篇解决学生问题的博客,写完后感觉不错,以后的一些常见问题也来博客记录下
对此,想起一个常问的经典BUG问题:为什么width设为100%,窗口缩小留了空白,无法显示100%?
【问题描述】
宽度为100%的DIV的宽度随着浏览器窗口的大小而改变.给了背景颜色后,窗口缩小,这个DIV的宽度就是浏览器窗口的宽度.背景颜色也是这么宽.把下面的滚动条往右拉的话.这个DIV宽度不会变宽,右边就出现空白 BUG.怎么解决?
这里就不贴图片了,相信大家能够脑补出画面和原因。
【详解】
原因在于滚动条出现的那层元素宽度小于其内部元素的宽度,浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。
所以你要做的其实很简单,给body设置一个min-width就行了。数值是滚动条刚好不出现的那个宽度。
扫描二维码关注公众号,回复:
210715 查看本文章
.