由于标准制造者愚蠢

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/

一种可能的解决方案是使用宽度的百分比，但高度的大众，但它不会是一个完美的盒子，这不是世界上最糟糕的东西，但仍然不理想。这是一个样本

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

如果视口单元没有 ~~include~~ 导致滚动条会很方便，但它毕竟是显示尺寸（屏幕）。看看这个带有伪元素的解决方案：

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

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

百分比是根据生成的包含块的宽度计算的，即使对于“填充顶部”也是如此。和＆＃39; padding-bottom＆＃39;。

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

在看到我自己的答案后，我认为需要一些改进。语义模糊是我替换“＃34; include＆＃34;用＆＃34;原因＆＃34;在顶部。因为vw单位只考虑视口大小 - 不，包括任何滚动条和导致溢出和滚动条将其宽度添加到100vw时的其他方向（使视口所需的总空间加上滚动条宽度，超出屏幕）。

与此处的问题一样，处理vw单位的最佳方式是可以避免使用它们，因为它们与桌面浏览器不兼容（不会覆盖）滚动条）。

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

Answer 3

html { overflow-x: hidden; }

似乎有用

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

3 个答案:

由于标准制造者愚蠢