CSS单位 – vh / vw和％之间的区别是什么？

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

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

vw和vh单元如何工作

答案具体说

vw和vh分别是窗口宽度和高度的百分比：100vw是宽度的100％，80vw是80％等等。

这看起来和%单位完全一样，这是比较常见的。

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

两者有什么区别？ 如果没有，为什么这些新的单位介绍到CSS3 ？

Answer 1

100%可以是任何事物的高度的100% 。 例如，如果我有一个1000px高的父级div ，以及一个高度为100%子div ，那么该子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; }