CSS单位-VH/VW和%之间有什么区别？

Question

我刚刚了解了一个新的不常见的CSS单元。vh和vw分别测量视口的高度和宽度的百分比。

我从Stack Overflow看这个问题，但它使单元看起来更加相似。

vw和vh单元是如何工作的

答案特别说

vw和vh分别是窗口宽度和高度的一个百分比:100vw是宽度的100%，80vw是80%等。

这似乎与%单元完全相同，后者更为常见。

在Developer Tools中，我尝试将vw/vh的值更改为%，反之亦然，得到了相同的结果。

这两者有区别吗？如果没有，为什么要将这些新单元引入CSS3？

Answer 1

100%可以是任何高度的100%。例如，如果父div高度为1000px而子div高度为100%，那么该子div理论上可能比视区的高度高得多，或者比视区的高度小得多，即使该div的高度设置为100%。

如果我将子div设置为100VH，那么它只会填充视口高度的100%，而不一定填充父div。

null

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;
}

html prettyprint-override"><div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>