缩小浏览器窗口右边出现空白
来源:互联网 发布:大淘营淘宝复制专家 编辑:程序博客网 时间:2024/05/21 09:37
布局做好的页面不会因为缩小浏览器窗口而右边出现空白?
[“发现现在缩小窗口,底部出现进度条,滑动至右边,就出现空白”]这个问题是个十分常见且容易忽略的bug。
原因是因为出现空白的元素设置了宽度100%,缩小窗口相当于减小了宽度值,那么为什么出现滚动条呢?
是因为页面中至少有一个元素a的width大于窗口的width,导致把页面撑开,出现了滚动条,而此时那个width:100%的元素宽度等于窗口宽度且小于元素a的宽度,所以右侧的空白长度=a的宽度-窗口宽度。
body设置overflow:hidden,让你丫撑页面,这样做的好处是用户为了看全,不得不放大窗口,那么100%的那位元素,就不会有空白了。
2习惯方法,给100%那个元素的父元素设置min-width=撑开页面那个元素的宽度,这样他们的宽度就保持一致了,空白就不会出现了。但是min-width在ie6以下不被支持怎么办?其实,现在还用ie6以下的人很少了。如果不想放弃这些用户,唯一的方法,用js做判断,与其这么麻烦还是选方法一最实在噢。
[“发现现在缩小窗口,底部出现进度条,滑动至右边,就出现空白”]这个问题是个十分常见且容易忽略的bug。
原因是因为出现空白的元素设置了宽度100%,缩小窗口相当于减小了宽度值,那么为什么出现滚动条呢?
是因为页面中至少有一个元素a的width大于窗口的width,导致把页面撑开,出现了滚动条,而此时那个width:100%的元素宽度等于窗口宽度且小于元素a的宽度,所以右侧的空白长度=a的宽度-窗口宽度。
所以你有2种解决办法。
body设置overflow:hidden,让你丫撑页面,这样做的好处是用户为了看全,不得不放大窗口,那么100%的那位元素,就不会有空白了。
2习惯方法,给100%那个元素的父元素设置min-width=撑开页面那个元素的宽度,这样他们的宽度就保持一致了,空白就不会出现了。但是min-width在ie6以下不被支持怎么办?其实,现在还用ie6以下的人很少了。如果不想放弃这些用户,唯一的方法,用js做判断,与其这么麻烦还是选方法一最实在噢。
0 0
- 缩小浏览器窗口右边出现空白
- width:100%缩小窗口时背景图片出现空白bug
- 红米 uc浏览器 右边 空白 白屏
- 缩小窗口时CSS背景图出现右侧空白BUG的解决方法
- 缩小窗口时CSS背景图出现右侧空白BUG的解决方法
- 缩小窗口时CSS背景图出现右侧空白BUG的解决方法
- 浏览器有水平滚动条时,把滚动条滑到最右边后,右边的背景颜色不显示解决方案,缩小窗口,拉动下方滚动条,背景缺失解决方案
- 浏览器缩小出现滚动条
- 缩小浏览器窗口,拉动底部滚动条,出现背景缺失问题
- UITableView 右边索引第一个出现空白情况的解决办法
- 缩小调大浏览器窗口-IE
- 缩小浏览器窗口延迟执行代码
- flex浏览器调试出现空白我解决
- HTML用浏览器打开后出现空白
- firefox 打开百度mp3时都缩小浏览器窗口
- 浏览器窗口缩小,水平滚动条自动显示出来
- 浏览器窗口放大缩小后页面内容居中解决方法
- 网页缩小,滚动之后出现空白?啊哈哈,我来帮你忙~~
- 第二届山东ACM省赛 Crack Mathmen
- 欢迎使用CSDN-markdown编辑器
- Weex 中别具匠心的 JS Framework
- js获取url参数
- 基于 HoughLinesP函数应用
- 缩小浏览器窗口右边出现空白
- WPFSample示例分析
- CXF webService客户端调用方法
- 应用部署weblogic 报错Unsupported major.minor version 51.0的解决过程
- 电子表格控件Aspose.Cells V17.4.0发布 | 新增重要功能
- 深入理解sdram之基本特性的理解
- java实现二叉树的建立,前中后序遍历,层次遍历,深度,节点个数等
- HashMap与ConcurrentHashMap的区别
- Android 解决软键盘问题