vw为什么将滚动条包含在视口中？

一尘不染

vw为什么将滚动条包含在视口中？

html

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

简单的解决方案是将宽度和高度设置为50vw。除非有滚动条，否则效果很好。我已经在Google上搜索了几个小时，无法理解为什么大众和大众在滚动条中将滚动条作为视口的一部分。

这是我的问题的样本

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

注意不需要的水平滚动条

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

有谁知道为什么vw /vh在视口中包含滚动条？另外，如果有人有比我更好的解决方案，我很想听听。我正在寻找一个纯CSS解决方案。我宁愿没有javascript。

阅读 1125

2020-05-10

共1个答案

一尘不染

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

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

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

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

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

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

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

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

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

2020-05-10