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

CSS の高さのパーセンテージ: パズルのロックを解除する

CSS を使用するときに遭遇する一般的な難題の 1 つは、幅と幅のパーセンテージ値の不一致です。身長。幅のパーセンテージ値は期待どおりに機能しますが、高さには同じことが当てはまりません。

#working と #not-working という 2 つの要素があり、それぞれ幅と高さのパーセンテージ値が指定されていると想像してください。 #working 要素は予想どおりに動作します。その幅はビューポートの 80% です。ただし、#not-working 要素の高さは 30% に設定されているにもかかわらず、0 のままです。

ブロック要素の性質

この難問を理解するには、次のことが必要です。 CSS のブロック要素の性質を詳しく調べます。デフォルトでは、

などのブロック要素は、その内容に基づいて高さを決定します。これは、囲まれたコンテンツのサイズに合わせて高さが拡張されることを意味します。

親子関係

パーセント値を使用してブロック要素の高さを設定する場合、要素の親コンテナを参照しています。 #not-working 要素では、親はビューポートであり、特定の高さは定義されていません。その結果、親と子の間に無限のフィードバック ループが発生し、高さを正確に測定できなくなります。

フィードバック ループを断ち切る

この問題を解決するには高さのパーセンテージが正しく機能するには、親要素に特定の高さを指定してフィードバック ループを断ち切る必要があります。これにより、子要素の高さのパーセンテージを計算するための固定基準点が提供されます。

要約すると、CSS で高さのパーセンテージ値を使用するには、あいまいさを防ぎ正確な計算を可能にするために、親要素の高さが定義されている必要があります。親の高さが固定されていない場合、子要素の高さは 0 のままです。

以上が高さのパーセンテージが幅のパーセンテージのように CSS で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。