vw为什么将滚动条包含在视口中？

vw为什么将滚动条包含在视口中？

如果视口单位不 包括 原因滚动条，但毕竟是显示尺寸（屏幕），这将很方便。不过，请使用伪元素查看此解决方案：

在您的示例中也使一个正方形：

.box {    float: left;    width: 50%;}.box::before {    content: "";    display: block;    padding-top: 100%;}

编辑-如果有人想知道这为什么起作用（垂直填充响应原始元素的宽度）…基本上就是在规范中对其进行定义的方式：

即使对于“ padding-top”和“ padding-bottom”，该百分比也是相对于所生成的框的包含块的宽度计算的。

---

遇到我自己的答案后，我认为它需要一些改进。语义上的歧义是为什么我在顶部用“ cause”代替“
include”一词。因为更多的事实是

vw

单位仅考虑了视口的大小- 不 包括任何滚动条并在其宽度加到其他方向时 _导致_溢出和在另一个方向上的滚动条

100vw

（使得视口所需的总空间加上滚动条的宽度超过屏幕）。

就像这里的问题一样，处理

vw

单元的最佳方法是尽可能避免使用它们，因为它们与桌面浏览器（没有覆盖的滚动条）不太兼容。

我编辑了包含CSS变量的想法，但是看起来还是很希望。