我刚刚了解了一个新的和不常见的 CSS 单元。 vh 和 vw 分别测量视口高度和宽度的百分比。
我从 Stack Overflow 上查看了这个问题，但它使单位看起来更加相似。
答案具体说
vw 和 vh 是窗口宽度和高度的百分比， 分别为：100vw 是宽度的 100%，80vw 是 80%，等等
这似乎与更常见的% 单元完全相同。
在开发者工具中，我尝试将值从 vw/vh 更改为 %，反之亦然，得到了相同的结果。
这两者有区别吗？如果不是，为什么要向CSS3 介绍这些新单位？
【问题讨论】：
标签： css viewport-units
整个视口宽度的百分比。 10vw 将解析为当前视口宽度的 10%，或者在 480 像素宽的手机上为 48 像素。 % 和 vw 的区别与 em 和 rem 的区别最相似。
% 长度是相对于本地上下文（包含元素）的宽度，而 vw 长度是相对于浏览器窗口的整个宽度。
【讨论】：
% 和 vw 的区别最类似于 em 和 rem 的区别。 % 长度是相对于本地上下文（包含元素）的宽度，而 vw 长度是相对于浏览器窗口的整个宽度。
【讨论】：
存在未必提出的差异。 100vw 包含了滚动条的宽度，而 100% 不包含它。这是一个很小的差异，但在进行设计时很重要。
【讨论】：
100% 可以是任何高度的100%。例如，如果我有一个父 div 是 1000px 高，一个子 div 是 100% 高度，那么这个子 div 理论上可能比视口的高度高得多，或者远小于视口的高度，即使 div 设置为 100% 高度。
如果我改为将子 div 设置为 100vh，那么它只会填充视口高度的 100%，而不一定是父 div .
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>【讨论】：
我知道这个问题很老了，@Josh Beam 解决了最大的不同，但还有另一个问题：
假设您有一个<div>，是<body> 的直接子代，您想填充整个视口，因此您使用width: 100vw; height: 100vh;。这一切都与width: 100%; height: 100vh; 相同，直到您添加更多内容并显示垂直滚动条。由于vw 将滚动条作为视口的一部分，width: 100vw; 将略大于width: 100%;。这个微小的差异最终会添加一个水平滚动条（用户需要看到额外的宽度），因此，两种情况下的高度也会略有不同。
在决定使用哪一个时必须考虑到这一点，即使父元素大小与文档视口大小相同。
例子：
使用width:100vw;：
.fullviewport {
width: 100vw;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100vw;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>使用width:100%;：
.fullviewport {
width: 100%;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100%;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>【讨论】：
body { overflow: hidden } 会导致滚动条不显示。
body { overflow-x: hidden } 应该没问题
感谢您的回答和代码示例，@IanC。这对我帮助很大。澄清一下：我相信您在写“侧边栏”时是指“滚动条”。
以下是一些关于视口单元计数滚动条的相关讨论，我也发现它们很有帮助：
vw、vh、vmin、vmax 单位（“视口百分比长度”）的 W3C spec 表示“假定不存在任何滚动条”。
显然 Firefox 从 100vw 中减去滚动条宽度，正如@Nolonar 在Difference between Width:100% and width:100vw? 的评论所指出的那样，引用“我可以使用”。
Can I Use，可能与规范 (?) 存在矛盾，表示除 Firefox 之外的所有浏览器目前都“错误地”认为 100vw 是整个页面宽度，包括垂直滚动条。
【讨论】：
vw（视图宽度）和 vh（视图高度）单位与视口大小有关，其中 100vw 或 vh 是视口宽度/高度的 100%。
例如， 如果视口为 1600 像素宽，并且您指定为 2vw，则这将相当于视口宽度的 2%，即 32 像素。
%单位总是基于当前元素的父元素宽度
【讨论】：