CSS の高さのパーセンテージが機能しないのはなぜですか?

CSS の高さのパーセンテージが機能しない

要素の高さをパーセンテージで指定しようとすると、期待どおりに表示されない場合があります。これは、高さのパーセンテージが親要素を基準にしているためです。したがって、すべての親要素の高さを 100% に設定することが重要です。

提供されたコード スニペット内:

<div>
<p>問題は、親要素、つまり body 要素と html 要素。この宣言がないと、div の高さのパーセンテージは、通常は設定されない親のデフォルトの高さを基準として解釈されます。</p>
<p>この問題を解決するには、body 要素と html 要素の両方の高さを明示的に 100% に設定します。 </p>
<pre class="brush:php;toolbar:false">html, body { height: 100%; width: 100%; margin: 0; }

html 要素と body 要素を 100% の高さに設定することで、div 要素は次のようになります。親の高さに基づいて高さを正しく計算できるようになり、親の高さがビューポートの 100% になりました。その結果、div はブラウザ ウィンドウの高さ全体にわたる高さで正しく表示されます。