Question

有很多网页讨论vh和vw与百分比。（我正在运行Chrome btw）。在我看来，100vw应该意味着浏览器窗口的确切大小，无论我是扩展它还是缩小它 - 当我在一个100vw的div周围绘制一个边框时，它与该宽度相匹配。但是，100vh总是溢出屏幕的底部。我玩过：

Mockito.verify(...)

当我在100vw和100vh的div周围绘制边框时，框会溢出屏幕底部。

我在这里错过了什么（如果有的话）？对我来说100vh是当前浏览器窗口大小的底部，而不是更多的像素。

提前致谢

Answer 1

在文件的开头添加*, *::before,*::after { box-sizing: border-box; }，边框现在将成为宽度的一部分，就像填充一样。

检查那里：https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

默认情况下，box-sizing设置为content-box，表示设置时为：

width: 100px;
padding: 20px;
border: 5px;

总宽度为 100 of content + 20 padding + twice 5 (5 for border-left, and 5 for border-right) = 130px;

如果您将box-sizing设置为border-box，则会在宽度中包含边框和填充

因此宽度将始终是您设置的宽度，无论边框和填充如何，它都会自动计算内容的宽度： 100px - 20px - 2 * 5px = 70px;

示例：

$('#toggleBoxSizing').on('click', function(){
    $('div').toggleClass('contentbox');
});

*, *::before, *::after {
    box-sizing: border-box;
}
html, body {padding: 0; margin: 0; }

div {
  height: 100vh;
  width: 100vw;
  border: 4px solid black;
}

div.contentbox {
  box-sizing: content-box;
}

#toggleBoxSizing {
   margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

    <button id="toggleBoxSizing">Toggle "box-sizing: border-box;"</button>
</div>

与浏览器窗口的当前大小相比，100vh和100vw

1 个答案: