CSS 单位 - vh/vw 和 % 之间有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31039979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Units - What is the difference between vh/vw and %?
提问by Richard Hamilton
I just learned about a new and uncommon CSS unit. vhand vwmeasure the percentage of height and width of the viewport respectively.
我刚刚了解了一个新的、不常见的 CSS 单元。vh并分别vw测量视口的高度和宽度的百分比。
I looked at this question from Stack Overflow, but it made the units look even more similar.
我从 Stack Overflow 上查看了这个问题，但它使单位看起来更加相似。
The answer specifically says
答案具体说
vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc.
vw 和 vh 分别是窗口宽度和高度的百分比：100vw 是宽度的 100%，80vw 是 80%，以此类推。
This seems like the exact same as the %unit, which is more common.
这似乎与%单位完全相同，后者更为常见。
In Developer Tools, I tried changing the values from vw/vh to % and viceversa and got the same result.
在开发人员工具中，我尝试将值从 vw/vh 更改为 %，反之亦然，得到了相同的结果。
Is there a difference between the two? If not, why were these new units introduced to CSS3?
两者有区别吗？如果没有，为什么要引入这些新单位CSS3？
回答by Josh Beam
100%can be 100%of the height of anything. For example, if I have a parent divthat's 1000pxtall, and a child divthat is at 100%height, then that child divcould theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that divis set at 100%height.
100%可以是100%任何东西的高度。举例来说，如果我有一个父div那是1000px高大的，小时候div是在100%高度，那么这个孩子div可能理论上比视，或小于视口的高度小得多的高度高得多，即使是div设置在100%高度。
If I instead make that child divset at 100vh, then it'll only fill up 100%of the height of the viewport, and not necessarily the parent div.
如果我改为将该子项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>回答by IanC
I know the question is very old and @Josh Beam addressed the biggest difference, but there's still another one:
我知道这个问题很老了，@Josh Beam 解决了最大的不同，但还有另一个：
Suppose you have a <div>, direct child of <body>that you want filling the whole viewport, so you use width: 100vw; height: 100vh;. It all works just the same as width: 100%; height: 100vh;until you add more content and a vertical scrollbar shows up. Since the vwaccount for the scrollbar as part of the viewport, width: 100vw;will be slightly bigger than width: 100%;. This little difference ends up adding a horizontal scrollbar (required for the user to see that little extra width) and by consequence, the height would also be a little different on both cases.
假设您有一个想要填充整个视口的<div>直接子级<body>，因此您使用width: 100vw; height: 100vh;. 在width: 100%; height: 100vh;您添加更多内容并显示垂直滚动条之前，这一切都一样。由于vw作为视口一部分的滚动条的帐户，width: 100vw;将略大于width: 100%;. 这种微小的差异最终会添加一个水平滚动条（用户需要看到额外的宽度），因此，两种情况下的高度也会有所不同。
That must be taken into consideration when deciding which one to use, even if the parent element size is the same as the document viewport size.
在决定使用哪一个时必须考虑到这一点，即使父元素大小与文档视口大小相同。
Example:
例子：
Using width:100vw;:
使用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>Using width:100%;:
使用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>回答by Slack Undertow
Thank you for your answer and code example, @IanC. It helped me a lot. A clarification: I believe you meant "scrollbar" when you wrote "sidebar."
感谢您的回答和代码示例，@IanC。这对我帮助很大。澄清：我相信您在写“侧边栏”时指的是“滚动条”。
Here are some related discussions about viewport units counting scrollbars that I also found helpful:
以下是一些关于视口单位计数滚动条的相关讨论，我也发现它们很有帮助：
The W3C specfor the vw, vh, vmin, vmax units (the "viewport percentage lengths") says "any scrollbars are assumed not to exist".
vw、vh、vmin、vmax 单位（“视口百分比长度”）的W3C 规范说“假定任何滚动条都不存在”。
Apparently Firefox subtracts scrollbar width from 100vw, as @Nolonar's comment at Difference between Width:100% and width:100vw?observes, citing "Can I Use".
显然 Firefox 从 100vw 中减去滚动条宽度，正如@Nolonar在“宽度：100% 和宽度：100vw 之间的差异”中的评论？观察，引用“我可以使用”。
Can I Use, perhaps in tension with the spec (?), says all browsers other than Firefox currently "incorrectly" consider 100vw to be the entire page width including the vertical scroll bar.
Can I Use，也许与规范 (?) 有冲突，表示除 Firefox 之外的所有浏览器目前“错误地”认为 100vw 是包括垂直滚动条在内的整个页面宽度。
回答by Slack Undertow
the vw (view-width) and vh (view-height) units are relational to the view-port size, where 100vw or vh is 100% of the view-port's width/height.
vw（视图宽度）和 vh（视图高度）单位与视口大小有关，其中 100vw 或 vh 是视口宽度/高度的 100%。
For example, if a view-port is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the view-port width, or 32px.
例如，如果视口的宽度为 1600 像素，而您指定的值为 2vw，则这将相当于视口宽度的 2%，即 32 像素。
% unit is always based on the parent element width of the current element
% 单位始终基于当前元素的父元素宽度
回答by Slack Undertow
There is a difference that has not necessarily been raised. 100vw includes the width of the scrool bar, while 100% does not include it. It is a small difference, but important when doing design.
有一个差异不一定被提出。100vw 包括滚动条的宽度，而 100% 不包括它。这是一个很小的区别，但在进行设计时很重要。
