# 部分情况下，使用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现在是

但是这个容器现在是

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/bu-fen-qing-kuang-xia-shi-yong-100vw-he-100-de-qu-bie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.