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

Question

我正在尝试建立一个有很多宽度和高度相同的盒子的网站。例如，我有一个页面，它有两个相同大小的框并排。

简单的解决方案是将宽度和高度设置为50vw。这有效，直到有一个滚动条。我用Google搜索了几个小时，无法理解为什么在地球上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。

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%;
}

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

百分比是根据生成的框的包含块的宽度计算的，即使对于“填充顶部”和“填充底部”也是如此。

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

---

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

与此处的问题一样，处理vw单元的最佳方法是可以避免它们，如果可以的话，因为它们与桌面浏览器（没有重叠滚动条）不兼容。

我编辑了包含CSS变量的想法，但看起来似乎有希望。

Answer 2

我有一个不同的答案，并觉得有必要分享我的挫折感

BECAUSE STANDARD-MAKERS ARE STUPID

（委员会，总的来说，总是如此）

一个简单的解决方法是始终保持滚动条并处理它

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

（使用overflow-x作为使用vh的布局）

我相信他们严重搞砸了这个狗。

Answer 3

html { overflow-x: hidden; }

似乎工作