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

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

width:100%缩小窗口时背景图片出现空白bug

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

width:100%缩小窗口时背景图片出现空白bug

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

width:100%缩小窗口时背景图片出现空白bug

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

width: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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA链接Mysql数据库(一)

第一步自定义 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 创建 java 文件运行 import java.io.InputStream; import java.sql.Connection; import java…

优化器,SGD+Momentum;Adagrad;RMSProp;Adam

Optimization 随机梯度下降&#xff08;SGD&#xff09;&#xff1a; 当损失函数在一个方向很敏感在另一个方向不敏感时&#xff0c;会产生上面的问题&#xff0c;红色的点以“Z”字形梯度下降&#xff0c;而不是以最短距离下降&#xff1b;这种情况在高维空间更加普遍。 SGD的…

iOS开发-平台使用TestFlight进行Beta测试

使用 TestFlight&#xff0c;你可以向测试人员发布你 App 的 prerelease 版本来收集反馈信息&#xff0c;为将来发布 App 的正式版做准备。现在 TestFlight 是一个可选功能&#xff0c;你也可以不使用它&#xff0c;而是像以往发布 App 那样直接提交到 appStore。 TestFlight 使…

java语言介绍 —(1)

1.基础常识 软件&#xff1a;即一系列按照特定顺序组织的计算机数据和指令的集合。分为&#xff1a;系统软件 和 应用软件 系统软件&#xff1a;windows , mac os , linux ,unix,android,ios,… 应用软件&#xff1a;word ,ppt,画图板,… 人机交互方式&#xff1a; 图形化界面…

第一个java程序helloworld —(2)

1.开发体验——HelloWorld 1.1 编写 创建一个java源文件&#xff1a;HelloWorld.java class HelloChina{public static void main(String[] args){System.out.println("Hello,World!");} }1.2 编译&#xff1a; javac HelloWorld.java 1.3 运行&#xff1a; java Hel…

2017年苹果公司开发者账号申请与支付流程

邓白氏编码下来之后&#xff0c;现在我们就可以走到付款流程&#xff0c;购置账号了&#xff01;觉得有用的顶一下 1.登陆苹果账号&#xff0c;加入苹果开发者 https://developer.apple.com/ 2.按照指示&#xff0c;一步步点击进入就行了&#xff0c;反正你也看不懂&#xff08…

java关键字与标识符 —(3)

1.java关键字的使用 定义&#xff1a;被Java语言赋予了特殊含义&#xff0c;用做专门用途的字符串&#xff08;单词&#xff09; 特点&#xff1a;关键字中所字母都为小写 具体哪些关键字&#xff1a; 2.保留字&#xff1a;现Java版本尚未使用&#xff0c;但以后版本可能会作…

2017年苹果公司开发者账号申请-公司邓白氏编码

申请公司的苹果开发者账号和企业级的苹果开发者账号时&#xff0c;都会用到邓白氏编码&#xff0c;也就是我们申请苹果开发者账号时需要填写的D-U-N-S Number。 申请这个邓白氏编码是免费的&#xff0c;但是从像华夏邓白氏公司提交申请到可以申请苹果开发者账号来用这个9位的D-…

java变量及进制问题 —(4)

1.变量的分类 1.1 按数据类型分类 详细说明&#xff1a; //1. 整型&#xff1a;byte(1字节8bit) \ short(2字节) \ int(4字节) \ long(8字节) //① byte范围&#xff1a;-128 ~ 127 // ② 声明long型变量&#xff0c;必须以"l"或"L"结尾 // ③ 通常&…

Struts2的两个蝴蝶飞,你好简单开发(一)

我把你的头像&#xff0c;设置成我的名字&#xff0c;此刻你便与我同在。我把你的名字&#xff0c;写进我的代码里面&#xff0c;以后&#xff0c;我的世界便存在着你。 “两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义&#xff0c;所以本文及其系列文章均…

用Canvas画圆环百分比进度条

<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>canvas圆环进度</title><link rel"stylesheet" href"">…

利用SQL计算两个地理坐标(经纬度)之间的地表距离

两个地理坐标(经纬度)地表距离计算公式&#xff1a; 公式解释如下&#xff1a; Long1,Lat1表示A点经纬度&#xff0c;Long2,Lat2表示B点经纬度&#xff1b;aLat1–Lat2 为两点纬度之差&#xff0c;bLong1-Long2为两点经度之差&#xff1b;6378.137为地球半径&#xff0c;单位为…

java数组 —(7)

* 1.数组的理解&#xff1a;数组(Array)&#xff0c;是多个相同类型数据一定顺序排列的集合&#xff0c;并使用一个名字命名&#xff0c; 并通过编号的方式对这些数据进行统一管理。 * 2.数组相关的概念&#xff1a; 数组名 元素 角标、下标、索引 数组的长度&#xff1a;元素…

java数组 —(8)

1.数组的创建与元素赋值&#xff1a; 杨辉三角&#xff08;二维数组&#xff09;、回形数&#xff08;二维数组&#xff09;、6个数&#xff0c;1-30之间随机生成且不重复。 2.针对于数值型的数组&#xff1a; 最大值、最小值、总和、平均数等 3.数组的赋值与复制 int[] a…

idea启动tomcat时报错:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 这个很多人都找不出来&#xff0c;原因无非2个&#xff1a; 一、jar 包有有些没能识别&#xff0c;tomcat没有配置好&#xff01; 二、这个一般代码错了&#xff1a; 除了看 server 的报错&#xff0c;别忘了看…

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一个正整数都可以表示为4个以内整数的平方和。 如果一个数含有因子4&#xff0c;那么我们可以把4都去掉&#xff0c;并不影响结果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的结果都相同。 如果一个数除以8余7&#xff0…

java类与对象 —(10)

1.面向对象学习的三条主线&#xff1a; 1.Java类及类的成员&#xff1a;属性、方法、构造器&#xff1b;代码块、内部类2.面向对象的大特征&#xff1a;封装性、继承性、多态性、(抽象性)3.其它关键字&#xff1a;this、super、static、final、abstract、interface、package、…

JavaScript-内存空间

深入了解js这门语言后&#xff0c;才发现它有着诸多众所周知的难点&#xff08;例如&#xff1a;闭包、原型链、内存空间等&#xff09;。有的是因为js的设计缺陷导致的&#xff0c;而有的则是js的优点。不管如何&#xff0c;总需要去学会它们&#xff0c;在学习过程中我觉得只…

java类的结构1: 属性 —(11)

类的设计中&#xff0c;两个重要结构之一&#xff1a;属性 对比&#xff1a;属性 vs 局部变量 1.相同点&#xff1a; 1.1 定义变量的格式&#xff1a;数据类型 变量名 变量值1.2 先声明&#xff0c;后使用1.3 变量都其对应的作用域 2.不同点&#xff1a; 2.1 在类中声明的…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 从第一个元素开始&#xff0c;该元素可以认为已经被排序 2. 取出下一个元素&#xff0c;在已经排序的元素序列中从后向前扫描 3. 如果该元素&#xff08;已排序&#xff09;大于新元素&#xff0c;将该元素移到下一位置 4. 重复步骤 3&am…