现在大多数页面都是采用主体内容水平居中布局
- <body>
- <div></div>
- </body>
- div{
- width:1200px;
- margin:0 auto;
- }
但是,这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto
类型的,也就是说如果内容高度不足一屏,没有滚动条;如果超出才会出现滚动条。于是,问题来了:
- 信息流页面,如新浪微博,是从上往下push渲染的。开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示,滚动条出现,占据可用宽度,
margin: 0 auto
主体元素自然会做偏移——跳动产生。 - JS交互,本来默认页面高度不足一屏,结果点击了个“加载更多”,内容超过一屏,滚动条出现,页面主体就会左侧跳动。
- 结构类似几个页面通过头部的水平导航刷新切换,结果有的页面有滚动条,有的没有。造成的结果就是,导航怎么跳来跳去!
现在有以下三种方法解决这一问题:
1、让浏览器的垂直滚动条一直显示- body { overflow-y: scroll; }
2、当内容高度超过一屏时,在浏览器左侧同时加上一个滚动条宽的的padding或margin。
- .wrap-outer {
- margin-left: calc(100vw - 100%);
- }
- .wrap-outer {
- padding-left: calc(100vw - 100%);
- }
注 : 1、
.wrap-outer
指的是居中定宽主体的父级。
2、
calc
是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在
background-position
上);
3、
100vw
相对于浏览器的
window.innerWidth
,是浏览器的内部宽度,注意,
滚动条宽度也计算在内
!而
100%
是可用宽度,是不含滚动条的宽度。
于是 ,
calc(100vw - 100%)
就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是
0
)!左右都有一个滚动条宽度(或都是
0
)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!
3、兼容写法
- html {
- overflow-x: hidden;
- overflow-y: auto;
- }
- body {
- width: 100vw;
- overflow: hidden;
- padding-left: calc(100vw - 100%);
- }