缩小窗口时CSS背景图出现右侧空白BUG的解决方法

页面容器（#wrap）与页面头部（#header ）为100%宽度。而内容的容器（#page）为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度：

改变浏览器窗口的大小，小于内容层宽度，如下图所示。

拖动水平滚动条，出现了bug的样子。右边的背景不存在了。如下图所示。

问题的根本在于：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。如图所示。

我们分析，问题的解决之道：既然是宽度理解上的差异，只需要告知浏览器页面容器的宽度，头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时，保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。

css代码为：

#wrap {width:100%;background:#ddd;width:expression(document.body.clientWidth <= 960? "960px": "auto");min-width:960px;
}
#header {width:100%;height:78px;border-bottom:1px solid #f60;background:#f0f0f0 url(head_tbg.jpg) repeat-x;
}
#page {width:960px;height:100px;margin:5px auto;background:#fff;border:1px solid #00CCCC;
}

html代码为：

<div id="wrap"><div id="header"></div><div id="page"></div>
</div>

缩小窗口时CSS背景图出现右侧空白BUG的解决方法相关推荐

CSS缩小窗口时，背景图出现右侧空白
缩小窗口时CSS背景图出现右侧空白BUG的解决方法(兼容各浏览器) 解决办法: 在css内加入如下两行代码,让它自己判断: width:expression(document.body.clientW ...
html 图片右侧空白,CSS缩小窗口时，背景图出现右侧空白
CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺){ background-p_w_picpath: url 关于宽度自适应,已经是前段 ...
html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
SVG公众号排版『大尺寸背景图重复安卓不显示』解决方法
今天懂点君给大家分享一个兼容问题,大尺寸背景图平铺/重复在安卓微信上不能正常显示,也就是背景图显示不出来. 一开始我是猜测跟平铺/重复没有关系,是图片尺寸太大导致背景图不显示,具体咱们来看如下案例. ...
flask加载网页时css美化效果加载不出来的解决方法
文章目录前言步骤参考文章前言问题: 直接打开网页就有css的美化效果,运行flask出来后就没有,网上找了半天之后找到了解决方案,在此记录一下,方便以后查找. 环境: vscode.pyth ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示
以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小. 这种效果应该怎么实现呢? 高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS .bg { ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

缩小窗口时CSS背景图出现右侧空白BUG的解决方法相关推荐

最新文章

热门文章