为什么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

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

因为标准制造者很愚蠢

(委员会,总的来说,总是如此)

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

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

(用于使用overflow-x的布局vh)

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

Answer 2

如果视口单元不包含滚动条但是它毕竟是显示尺寸(屏幕)会很方便.看看这个带有伪元素的解决方案:

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