> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/bu-fen-qing-kuang-xia-shi-yong-100vw-he-100-de-qu-bie.md).

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

* 抖音：<https://v.douyin.com/rWvrfsX/>
* B站：<https://www.bilibili.com/video/BV1Ev4y1d7Pz/>

> **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现在是

但是这个容器现在是

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