「min-height」または「max-height」を使用するときに、親の高さのない子要素に対して「height: 100%」が機能しないのはなぜですか?

親の最小/最大身長の身長値がないと、子の身長: 100% が適用されないのはなぜですか

特定のシナリオでは、子が要素は 高さ: 100% に設定されており、その親要素にはmin-height または max-height の値はあるが、明示的な height 値がない場合、子は希望の高さを継承できない可能性があります。 HTML、CSS、および関連する CSS 仕様を使用して、この動作の背後にある理由を詳しく調べてみましょう。

次の HTML および CSS コードを考えてみましょう:

問題:

上記の例では、このドキュメントをブラウザで表示すると、次のことに気づくかもしれません。子要素はコンテナ全体を埋めません。コンテナの最小高さが 300px で、子の高さが 100% であるにもかかわらず、子要素は空のままです (高さが表示されません)。

説明:

この動作は CSS 仕様に起因します。仕様には次のように記載されています。

「高さのパーセンテージを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されていない場合」 (つまり、コンテンツの高さに依存します)、この要素は絶対的に配置されていないため、値は 'auto' に計算されます。"

この場合、コンテナの高さは明示的に指定されません。これはその内容によって決まります。この場合、それは単なる子要素です。子要素には明示的な高さがないため（高さのパーセンテージのため）、コンテナの高さは基本的に未定義です。その結果、子の高さのパーセンテージも未定義になります。

この問題を解決し、子要素がコンテナ全体を確実に埋めるには、次の変更されたコードに示すように、コンテナの高さの値を明示的に設定する必要があります。 CSS:

コンテナの高さをたとえ小さな値 (この場合は 1px) に設定することで、子要素の高さのパーセンテージの基準高さを効果的に提供できます。これにより、子要素がコンテナの高さを正しく継承し、コンテナ全体を確実に埋めることができるようになります。

以上が「min-height」または「max-height」を使用するときに、親の高さのない子要素に対して「height: 100%」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。