博客列表 >去除浏览器窗口缩小带来的横向滚动背景出现空白部分

去除浏览器窗口缩小带来的横向滚动背景出现空白部分

lilove的博客
lilove的博客原创
2018年05月20日 17:38:294533浏览

问题:

在设置完html背景后,当浏览器窗口缩小时,出现横向滚动条,向右拖动滚动条后,背景出现空白区域。

效果如下:

出现空白.png

明明这里我设置了背景容器宽度是100%,为何背景图片会成为这个样子呢?

原来,浏览器解析宽度有个特点,如果缩放浏览器窗口的时候,宽度小于了网页内元素的宽度最小值时,会解析网页元素内的最大宽度为滚动条拖动距离,所以出现了间隔空白,这时只需要将网页背景容器的100%宽度改为min-width等于网页元素中最宽的宽度即可。

如上图我将CSS代码中:

QQ截图20180520173410.png

改为:

QQ截图20180520173442.png

就解决了空白问题。
解决后的效果如下:

解决.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议