码迷,mamicode.com
首页 > 其他好文 > 详细

页面出现滚动条时,居中的元素不会跳动的方法

时间:2016-08-23 19:07:12      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:浏览器   vw   居中   

  我们经常会遇到这样的情况:在一个页面加载的开始,页面高度比较低,不会出现滚动条。而随着页面的加载,滚动条出现,页面中居中的标题,图片或者一些其他的东西会突然往左边跳一下。

  这是因为,刚开始没有出现滚动条时,你用margin:0 auto;所做的居中是根据浏览器窗口大小而计算的居中。在出现滚动条时,用margin:0 auto;所做的居中是根据浏览器窗口大小减去滚动条的宽度而计算的居中。这样就会出现跳动的问题。

  解决方法我是从一个博客的评论上学到的,看到这个解决办法,才发现自己学的东西有多浅显,惭愧啊惭愧,还一直以为自己虽不算大牛,最起码还不错呢,高估自己了。

  言归正传,这个解决办法很简单,就是加上一句body{width: 100vw;}。

  vw是一个css单位,参考手册上的说法是“视口被均分为100单位的vw”,这里的视口应该指的是浏览器窗口吧。那么100vw就是浏览器窗口大小,不管有没有滚动条,这个值是不会变的。这样就解决了以上的问题。

  vw兼容IE9+,暂时不知道这个方法有没有其他的缺点。

  以上,个人认为这个一个很完美的解决方法。

页面出现滚动条时,居中的元素不会跳动的方法

标签:浏览器   vw   居中   

原文地址:http://10909244.blog.51cto.com/10899244/1841613

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!