为什么 vw 将滚动条作为视口的一部分？

Question

我正在尝试建立一个网站，其中包含许多宽度和高度相同的框。例如，我有一个并排有 2 个大小相等的框的页面。

简单的解决方案是将宽度和高度设置为 50vw。在有滚动条之前，这很好用。我在谷歌上搜索了几个小时，不明白为什么 vw 和 vh 会将滚动条作为视口的一部分。

这是我的问题的示例

HTML

 <div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

CSS

 body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.lotta-content {
    height: 10000px;
}

注意不需要的水平滚动条

https://jsfiddle.net/3z887swo/

一种可能的解决方案是使用百分比表示宽度，但使用 vw 表示高度，但它永远不会是一个完美的盒子，这不是世界上最糟糕的事情，但仍然不理想。这是一个示例

https://jsfiddle.net/3z887swo/1/

有谁知道为什么 vw/vh 将滚动条作为视口的一部分？另外，如果有人有比我自己更好的解决方案，我很乐意听到。我正在寻找纯 CSS 解决方案。我宁愿没有javascript。

原文由 Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

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

https://jsfiddle.net/3z887swo/4/

 .box {
    float: left;
    width: 50%;
}

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

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

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

http://www.w3.org/TR/CSS2/box.html#padding-properties

---

在遇到我自己的答案后，我认为它需要一些改进。语义歧义是我将顶部的“include”替换为“cause”的原因。因为更多的事实是 vw 单位只考虑视口大小 - 不 包括任何滚动条并 导致 溢出和另一个方向的滚动条，当它的宽度被添加到 100vw （使所需的总空间为视口加上滚动条宽度，超过屏幕）。

对于此处的问题，处理 vw 单元的最佳方法可能会尽可能避免使用它们，因为它们与桌面浏览器不太兼容（没有覆盖滚动条）。

我删除了包含 CSS 变量的想法，无论它看起来多么有希望。

原文由 Shikkediel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有不同的答案，觉得有必要分享我的沮丧

因为标准制定者很愚蠢

（委员会，一般来说，总是）

一种简单（简单）的解决方法是始终保持滚动条并对其进行处理

html,body {margin:0;padding:0}
html{overflow-y:scroll}

（使用 overflow-x 用于使用 vh 的布局）

我相信他们真的 _把狗搞砸了_。

原文由 ZJR 发布，翻译遵循 CC BY-SA 4.0 许可协议