部分情况下,使用100vw和100%的区别

Demo预览:

https://sunzsh.github.io/html-demos/100percent.html

代码 / 文件:

https://github.com/sunzsh/st-html-demo/blob/master/100percent.html

今天涨了个教训

我发现啊

对于这种宽度需要撑满屏幕的容器

他能用百分之百就不要用这种vw

为啥呢

其实在Mac系统下看不出任何区别

大家看 这是没什么区别

但是呢如果在windows里

注意啊

这是百分之百的情况下没有什么问题

但是有个细节大家看

我现在已经让它出现滚动条了

然后呢我们再换回

(100)vw

大家看它横向也出现滚动条了

原因就是啊这100vw

它永远指的就是这个浏览器的宽度

即使页面里出现这种纵向的滚动条

占用了一点空间哈

他也不管

他这个容器的宽度

永远是这个浏览器的宽度

所以呢就会导致这个容器的宽度

宽于body的宽度

大家看body现在是

但是这个容器现在是

所以就会导致它出现横向的滚动条

最后更新于