CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
来源:互联网 发布:欧洲杯 网络直播 编辑:程序博客网 时间:2024/05/09 09:45
很简单,只要一行代码就搞定了:
.wrap-outer { margin-left: calc(100vw - 100%);}
或者:
.wrap-outer { padding-left: calc(100vw - 100%);}
然后就可以庆祝放鞭炮啦!!
首先,.wrap-outer
指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,不推荐);
然后,calc
是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position
上);
最后,100vw
相对于浏览器的window.innerWidth
,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%
是可用宽度,是不含滚动条的宽度。
于是,calc(100vw - 100%)
就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0
)!左右都有一个滚动条宽度(或都是0
)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!
0 0
- CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
- CSS3 calc实现滚动条出现页面不跳动
- 关于浏览器出现滚动条和消失页面不跳动
- CSS vw让overflow:auto页面滚动条出现时不跳动
- vw让overflow:auto页面滚动条出现时不跳动
- 纯CSS3使用vw和vh视口单位实现自适应
- 页面不出现滚动条,局部有滚动条
- CSS3新vw, vh单位
- CSS3: calc计算属性
- 让页面出现滚动条的时候,滚动条不影响页面宽度
- 写页面常用的css特性:calc() vh vw ch和ex
- 如何解决滚动条使页面跳动的问题
- CSS3 视区相关单位VW,VH
- 滚动条出现页面不晃动的终极处理
- android 跑马灯出现重复跳动、不滚动问题
- 实现页面滚动条
- textarea如何实现高度自适应(不出现滚动条)?
- 关于css3+jq的不出现滚动条的下拉菜单
- FZU-2150-Fire Game
- HashMap的工作原理
- JS实现无刷新倒计时(未测试)
- 使用nmap 验证多种漏洞
- java之实现类HashSet与TreeSet
- CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
- MySQL性能分析及explain的使用
- C语言pause()函数:让进程暂停直到信号出现
- 根本的观点
- 流控机制的解析
- 如何在vs2010中使用vs2013的解决方案
- centos7.2系统二进制安装mysql-5.6.31
- 缓冲区问题:子进程会复制父进程的缓冲区
- js获取屏幕大小 (未测试)