子 Div が親の残りの高さを占めるようにするにはどうすればよいですか?

Div が親の残りの高さを占めるようにする方法

次の HTML および CSS コードを検討してください:

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

ここには、2 つの子要素を持つコンテナ div があります。最初の子 (#up) には指定された高さがありますが、2 番目の子 (#down) には指定されていません。 #down がコンテナ div の残りの高さを占めるようにするにはどうすればよいでしょうか?

解決策

ブラウザの互換性と #up に修理済み高さ。

オプション:

1.グリッドレイアウト:

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

2.フレックスボックスのレイアウト:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

3.計算された高さ:

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

4.オーバーフロー非表示:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

方法の選択は、特定の要件とブラウザーのサポートによって異なります。 CSS には、サイズ変更用の max-content プロパティ値が含まれるようになりました。これは特定のシナリオに適している可能性があります。