Html 100vh和100vw与浏览器窗口的当前大小进行比较

有很多页面讨论vh和vw与百分比的关系。（顺便说一句，我正在运行Chrome）。在我看来，100vw应该是指浏览器窗口的确切大小，不管我是扩展还是缩小它——当我在一个div周围画一个边框时，这个边框是100vw，它确实匹配这个宽度。 然而，100vh总是溢出屏幕底部。我玩过：

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

and 

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

当我在一个100vw和100vh的div周围画一个边框时，方框溢出了屏幕的底部

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

---

提前感谢

添加

*，*：：之前，*：：之后{box size:border box；}

在文件开头，边框现在将成为宽度的一部分，就像填充一样

检查那里：

默认情况下，框大小设置为“内容框”，这意味着当您设置：

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

总宽度为

100内容+20填充+两次5（左边框5，右边框5）=130px

如果将
框大小
设置为
边框框
，它将在宽度中包含边框和填充

因此，宽度将始终是您设置的宽度，而不考虑边框和填充，它将自动计算内容的宽度：
100px-20px-2*5px=70px

例如：


$（'toggleBoxSizing'）。在（'click'，function（）上{
$（'div'）.toggleClass（'contentbox'）；
});
*，*：：之前，*：：之后{
框大小：边框框；
}
html，正文{填充：0；边距：0；}
div{
高度：100vh；
宽度：100vw；
边框：4倍纯黑；
}
目录盒{
框大小：内容框；
}
#开关箱尺寸{
利润率：50像素；
}

切换“框大小：边框框
Add
*，*：：before，*：：after{box size:border box；}
在文件开头，边框现在将成为宽度的一部分，就像填充一样

检查那里：

默认情况下，框大小设置为“内容框”，这意味着当您设置：

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

总宽度为
100内容+20填充+两次5（左边框5，右边框5）=130px

如果将
框大小
设置为
边框框
，它将在宽度中包含边框和填充

因此，宽度将始终是您设置的宽度，而不考虑边框和填充，它将自动计算内容的宽度：
100px-20px-2*5px=70px

例如：


$（'toggleBoxSizing'）。在（'click'，function（）上{
$（'div'）.toggleClass（'contentbox'）；
});
*，*：：之前，*：：之后{
框大小：边框框；
}
html，正文{填充：0；边距：0；}
div{
高度：100vh；
宽度：100vw；
边框：4倍纯黑；
}
目录盒{
框大小：内容框；
}
#开关箱尺寸{
利润率：50像素；
}

切换“框大小：边框框
不要忘记重置默认正文边距。不要忘记重置默认正文边距。