Div の子に親コンテナの残りのスペースを埋めるにはどうすればよいですか?

残りの親スペースを占有するために div の高さを拡張する

div の子がその親コン​​テナの残りのスペースを占めるようにするのは一般的なタスクです高さを明示的に設定せずに。これを実現するためのいくつかの方法を次に示します。

1. Grid Layout

.container {
  display: grid;
  grid-template-rows: 100px;
}

このメソッドは、高さ 100 ピクセルの 1 行のグリッド レイアウトを作成します。子 div が残りのスペースを埋めます。

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox を使用すると、子 div で flex-grow を 1 に設定して、残りの垂直方向のスペースを埋めるように拡張できます。

3.高さの計算

.up {
  height: 100px;
}

.down {
  height: calc(100% - 100px);
}

このメソッドは、CSS の高さ計算を使用して、最初の子の高さを 100% から減算し、残りの高さを 2 番目の子の高さに与えます。

4 。オーバーフロー非表示

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

オーバーフローを非表示にしてデフォルトの表示動作をオーバーライドすると、子 div が親の高さを埋めることができます。

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Max-content プロパティ値は、コンテンツに応じて子 div のサイズを設定し、残りのスペースを効果的に占有します。

一部のメソッドには制限やブラウザがある場合があることに注意してください。サポート制限。特定の要件に基づいて適切な方法を選択してください。

以上がDiv の子に親コンテナの残りのスペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。