我刚刚了解了一个新的和不常见的CSS单元。 vh和vw分别测量视口的高度和宽度的百分比。
我从Stack Overflow看了这个问题，但它使得这些单元看起来更加相似。
答案具体说
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更改为％和反之亦然，得到相同的结果。
两者有区别吗？如果没有，为什么这些新的单位介绍给CSS3？
解决方法
100％可以是任何东西的100％。例如，如果我的父div是高达1000px的父div，并且子div的高度为100％，那么该子div在理论上可以比视口的高度高得多，或者远小于视口的高度，即使该div设置为100％的高度。
如果我将该小孩div设置为100vh，那么它只会填充视口的100％，而不一定是父div。
看这个jsfiddle：
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;
}
