为什么大众将滚动条作为视区的一部分？

Question

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

简单的解决方案是将宽度和高度设置为50VW。在有滚动条之前，这工作很好。我在谷歌上搜索了好几个小时，不明白为什么大众和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://jsfidle.net/3z887swo/

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

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

有没有人知道为什么VW/VH将滚动条作为视区的一部分？还有，如果有人有比我自己更好的解决方案，我很想听听。我正在寻找一个纯粹的CSS解决方案。我宁愿没有JavaScript。

Answer 1

如果视区单元不 <罢工> 包括 导致滚动条，但毕竟是显示大小（屏幕）。不过，我们来看看这个带有伪元素的解决方案：

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

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

https://jsfidle.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#填充-属性

在遇到我自己的答案后，我认为它需要一些改进。语义上的歧义就是为什么我在顶部用“原因”取代了“包括”这个词。因为vw单元只考虑了视口大小--不包括任何滚动条，当滚动条的宽度加到100vw时，会导致溢出和另一个方向的滚动条（使所需的总空间为视口加滚动条的宽度，超过屏幕）。

与这里的问题一样，处理vw单元的最佳方法可能是尽可能地避免它们，因为它们与桌面浏览器（没有覆盖滚动条）不太兼容。

我删掉了包含CSS变量的想法，不管它看起来多么有希望。