親要素に `min-height`/`max-height` があるが明示的な高さがないときに、子要素で `height: 100%` が失敗するのはなぜですか?

親要素に最小高さ/最大高さの値があるが高さの値が指定されていない場合、子要素の高さ: 100% が適用されないのはなぜですか?

次の HTML と CSS を検討してください。 setup:

<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%;
}

このシナリオでは、コンテナ要素は予想どおり 300px の高さでレンダリングされますが、子要素は height: 100% 宣言にもかかわらず高さなしのままになります。

ただし、コンテナ要素に小さな高さの値 (例: 1px) を追加すると、子要素が突然コンテナ全体を高さで埋めてしまいます。 300px:

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

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

この動作は CSS 仕様自体に起因します。要素の高さが明示的に定義されていない場合、その子の高さのパーセンテージは失敗します。仕様によると:

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

最初のケースでは、コンテナ要素の高さが明示的に設定されていない場合、子要素の高さ: 100% が「auto」になります。これは、コンテンツが必要とするだけのスペースしか占有しないことを意味し、その結果、高さは表示されません。

コンテナ要素に高さの値 (1 ピクセル程度の小さい値であっても) を追加すると、その高さが明示的に定義され、子要素が許可されます。要素の高さ: 100% を使用して、正しい高さを計算して適用します。

したがって、一見予期しない動作は、親要素の高さが次の値である必要があるという事実から生じています。高さのパーセンテージを正しく計算するために、子要素に対して明示的に定義されています。

以上が親要素に `min-height`/`max-height` があるが明示的な高さがないときに、子要素で `height: 100%` が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。