我刚刚了解了一个新的，不常见的CSS单元。 vh和vw分别测量视口高度和宽度的百分比。
我从Stack Overflow看了这个问题，但它使单位看起来更相似。
答案明确指出
vw和vh是窗口宽度和高度的百分比， 分别为：100vw为宽度的100％，80vw为80％等。
这似乎与%单位完全相同，这更常见。
在开发人员工具中，我尝试将值从vw / vh更改为％，反之亦然，并得到相同的结果。
这两者有区别吗？如果没有，为什么这些新单位被引入CSS3？
答案 0 :(得分：119)
100%可以是任何事物高度的100%。例如，如果我的父级div的{{1}}身高1000px，且div身高100%，那么该孩子{{1}理论上可以比视口的高度高得多，或者远小于视口的高度，即使div设置为div高度。
如果我改为将该子100%设置为div，那么 仅填充视口高度的100vh ，而不一定是父100%。
divbody,
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;
}
答案 1 :(得分：11)
我知道这个问题非常陈旧，而@Josh Beam解决了最大的差异，但还有另外一个：
假设您想要填充整个视口的ContentResolver直接子项<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;
}
答案 2 :(得分：1)
感谢您的回答和代码示例@IanC。这对我帮助很大。澄清：我相信你的意思是＆＃34;滚动条＆＃34;当你写＆＃34;侧边栏时。＆＃34;
以下是关于计算滚动条的视口单元的一些相关讨论，我也发现它们很有用：
vw，vh，vmin，vmax单位的W3C spec（＆＃34;视口百分比长度＆＃34;）表示＆＃34;假定任何滚动条都不存在＆＃34;。
显然Firefox会从100vw中减去滚动条宽度，因为@ {Nolonar在Difference between Width:100% and width:100vw?的评论观察，引用＆＃34;我可以使用＆＃34;。
Can I Use，可能与规范（？）紧张，说除了Firefox之外的所有浏览器目前＆＃34;错误＆＃34;将100vw视为整个页面宽度，包括垂直滚动条。
答案 3 :(得分：0)
vw（视图宽度）和vh（视图高度）单位与视口大小有关，其中100vw或vh是视口宽度/高度的100％。
例如， 如果一个视口是1600px宽，你指定的东西是2vw，那将相当于视口宽度的2％或32px。
％unit始终基于当前元素的父元素宽度
答案 4 :(得分：0)
存在未必引起的差异。 100vw包括木棒的宽度，而100％不包括。差异很小，但在进行设计时很重要。
答案 5 :(得分：0)
% 和 vw 的区别与 em 和 rem 的区别最相似。 % 长度相对于本地上下文（包含元素）的宽度，而 vw 长度相对于浏览器窗口的整个宽度。
答案 6 :(得分：0)
整个视口宽度的百分比。 10vw 将解析为当前视口宽度的 10%，或在 480 像素宽的手机上解析为 48 像素。 % 和 vw 的区别与 em 和 rem 的区别最相似。
% 长度相对于本地上下文（包含元素）的宽度，而 vw 长度相对于浏览器窗口的整个宽度。