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

【问题标题】：100vh and 100vw compared to the current size of the browser window100vh 和 100vw 与浏览器窗口的当前大小相比
【发布时间】：2018-07-30 22:41:09
【问题描述】：

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

html, body {
  height: 100%;
  width: 100%;
}

and 

html, body {
  height: 100vh;
  width: 100vw;
}

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

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

提前致谢

【问题讨论】：

不要忘记重置默认的正文边距。

标签： html css viewport

【解决方案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>

【讨论】：