親に「min-height」しかないのに、子の Div が 100% の高さを満たさないのはなぜですか?

親子要素の高さとパーセンテージの計算

次の HTML と CSS の設定を考慮してください:

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

子供の身長はありません応答

コンテナ要素に min-height 値がある場合、子要素の高さは 100% の指定にもかかわらず 0 のままです。ただし、コンテナ要素の高さを 1px などの小さな値に設定すると、子要素がコンテナを満たすことができます。

動作を理解する

その理由動作は CSS の高さ計算の性質にあります。親要素に明示的に定義された高さがない場合 (min-height の場合など)、その高さはその内容によって決まります。この場合、そのコンテンツは子要素です。

ただし、100% に設定された子要素の高さは、それを含むブロックの高さを基準にして計算されます。包含ブロック (親要素) には明示的に指定された高さがないため、子要素の高さを計算できません。

明示的な高さの定義

高さの設定親要素は、たとえ小さい値であっても、それを含むブロックの最終的な高さを提供します。これにより、子要素はその高さを親の高さの 100% として計算できるようになります。

重要なポイント:

パーセンテージの高さの計算には、それを含むブロックの高さを明示的に定義する必要があります。 。包含ブロックに最小高さ/最大高さの値があるが高さの値がない場合、包含ブロックの高さが明示的に定義されるまで、子要素の高さは適用されません。

以上が親に「min-height」しかないのに、子の Div が 100% の高さを満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。