转载 | 缩小浏览器窗口右边出现空白

Posted 自转不息

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转载 | 缩小浏览器窗口右边出现空白相关的知识,希望对你有一定的参考价值。

本文引自:http://blog.csdn.net/gyy93/article/details/70905405

 

布局做好的页面不会因为缩小浏览器窗口而右边出现空白?


“发现现在缩小窗口,底部出现进度条,滑动至右边,就出现空白”这个问题是个十分常见且容易忽略的bug。


原因是因为出现空白的元素设置了宽度100%,缩小窗口相当于减小了宽度值,那么为什么出现滚动条呢?


是因为页面中至少有一个元素a的width大于窗口的width,导致把页面撑开,出现了滚动条,而此时那个width:100%的元素宽度等于窗口宽度且小于元素a的宽度,所以右侧的空白长度=a的宽度-窗口宽度。


所以你有2种解决办法。

 

1即然滑动了滚动条,才会发现你原来比之前短了许多,那么就干脆不让滚动条出现!将不良后果扼杀在摇篮之中。
body设置overflow:hidden,让你丫撑页面,这样做的好处是用户为了看全,不得不放大窗口,那么100%的那位元素,就不会有空白了。


2习惯方法,给100%那个元素的父元素设置min-width=撑开页面那个元素的宽度,这样他们的宽度就保持一致了,空白就不会出现了。但是min-width在ie6以下不被支持怎么办?其实,现在还用ie6以下的人很少了。如果不想放弃这些用户,唯一的方法,用js做判断,与其这么麻烦还是选方法一最实在噢。

以上是关于转载 | 缩小浏览器窗口右边出现空白的主要内容,如果未能解决你的问题,请参考以下文章

html插入一张图片是全屏宽的,缩小浏览器图片是从右边开始减少的,怎么样才能让图片从两边开始减少?

为啥我是手机浏览网页有时候会有一块或者右边空白,是否我的手机有问题,

轮播图像高度缩小

在 Canvas 中制作根据纵横比缩小的响应式浏览器窗口 [重复]

解决电脑上网问题记录

怎么设置电脑浏览器窗口大小?