CSS の高さのパーセンテージが幅のパーセンテージと異なる動作をするのはなぜですか?

CSS で高さのパーセンテージが幅と異なるのはなぜですか

質問: 幅のパーセンテージ値が正常に適用されたにもかかわらず、高さのパーセンテージが失敗するのはなぜですか同じ効果が得られますか?

答え: 根本的な違いは次のとおりです。ブロック要素のデフォルトの動作。これらの要素の高さは、本質的に、それらが囲むコンテンツに適応します。次の例を考えてみましょう:

<div>

ここで、#inner は

内のテキストに合わせて垂直に拡張され、#outer は #inner を含むように高さを調整します。

高さまたは幅のパーセンテージを指定する場合、それは親要素を参照します。幅については、ブロック要素は通常、親の幅全体に及ぶため、結果が予測可能になります。幅の設定: 50% は、特定のピクセル幅に変換されます。

ただし、ブロック要素の高さはコンテンツによって決まるため、高さは異なります。親要素の高さを明示的に定義しないと、高さ: 50% の割り当てがあいまいになります。親要素と子要素の間のこのフィードバック ループにより、最終的な高さを決定する際に不確実性が生じます。このサイクルを断ち切るには、親要素が指定された高さを持っている必要があります。

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