絶対的な位置決めをせずに、Div が残りの親の高さを占めるようにするにはどうすればよいですか?

絶対的な配置を行わずに、Div が残りの親の高さを占めるようにする

HTML/CSS では、子 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;}

ここで、「down」div は「」の下の空白を占める必要があります。上" div.

解決策

を実現するにはいくつかの方法がありますこれ:

グリッド:

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

フレックスボックス:

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

計算ション:

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

オーバーフロー:

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

注:

• CSS グリッドとフレックスボックスをサポートするブラウザでは、これらのソリューションはより洗練されたアプローチを提供します。
• 「オーバーフロー」メソッドは、親コンテナの高さが固定されている場合に便利です。ただし、予期しないスクロール動作が発生する可能性があります。