[解決済み】CSS単位 - vh/vwと%はどう違うの？

質問

新しい、珍しいCSSユニットを知りました。 vh と vw は、それぞれビューポートの高さと幅のパーセンテージを表します。

Stack Overflowのこの質問を見ましたが、単位がさらに似ているように見えました。

vwとvhの単位はどのように機能するのか

回答には具体的に次のように書かれています。

vwとvhは、ウィンドウの幅と高さに対するパーセンテージです。 があります。100vwは横幅100％、80vwは80％などです。

と全く同じに思えますが、これは % の単位で、より一般的です。

デベロッパーツールで、値をvw/vhから%に変更したり、その逆も試してみましたが、同じ結果になりました。

この2つに違いはあるのでしょうか？もしそうでないなら、なぜこれらの新しい単位が CSS3 ?

解決方法は？

100% は 100% の高さは何でもいい。例えば、親が div は 1000px 背の高い、そして子供 div である。 100% の高さであれば、その子 div は、理論的にはビューポートの高さよりはるかに高く、またはビューポートの高さよりはるかに小さくすることができる。 その div に設定されています。 100% 高さ .

その代わりに、その子を 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>