css - ビューポートユニット div 内のパーセンテージの高さは Safari では機能しません

Question

vh ユニットを使用して、ビューポートに基づいて高さ 100% の div を作成しました。

div {
    height:100vh;
    background:red;
}

この 100% の高さの div の中に、50% の高さの div が必要です。

span {
    display:block;
    height:50%;
    background:blue;
}

Chrome では問題なく動作しますが、Safari ではあまりうまくいきません。動作するはずですが、親 div の高さに固定値を使用している場合にのみ動作します。最新のiOS 7.1ではモバイルサファリでも機能しません

親 div に 50vh を使用できることはわかっていますが、vh ユニットを 1 回しか使用しない場合は、単純なパーセンテージの高さがクロスブラウザーの互換性に適している可能性があり、フォールバックを作成しやすくなります。

score 0 · Accepted Answer

これをスタイルシートに追加してみてください：

html, body{
    height: 100%;
    width: 100%;
}

css - ビューポート ユニット div 内のパーセンテージの高さは Safari では機能しません