[解決済み] div (height) が親の残りの高さを占めるようにする。

質問

http://jsfiddle.net/S8g4E/

コンテナ div を二つの子で構成しています。最初の子は与えられた高さを持っています。どうすれば、2番目の子がコンテナの "フリースペース" を占めるようになりますか？ div の自由空間を占めるようにするにはどうしたらよいでしょうか。

この例では、ピンクの div は、空白のスペースも占有しているはずです。

この質問に似ています。 divが残りの高さを占めるようにするにはどうすればよいですか？

しかし、私は 位置の絶対値 .

どのように解決するのですか？

を展開する。 #down の残りのスペースを埋めるために、子プロセスを #container は、実現したいブラウザサポートと #up が定義された高さを持つかどうかによって、さまざまな方法で実現できます。

サンプル

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

グリッド

CSSの grid レイアウトは、Flexbox モデルほど簡単ではないかもしれませんが、別の選択肢を提供します。しかし、コンテナ要素にスタイルを設定するだけでよいのです。

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

は grid-template-rows は最初の行を100pxの固定高さとして定義し、残りの行は残りのスペースを埋めるために自動的に伸張します。

確か IE11 では -ms- の接頭辞があるため、対応したいブラウザで機能を確認するようにしてください。

フレックスボックス

CSS3 の フレキシブルボックスレイアウトモジュール ( flexbox ) は、現在では十分にサポートされており、非常に簡単に実装することができます。柔軟性があるので #up が定義された高さを持っていない場合でも動作します。

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

IE10 および IE11 の一部のフレックスボックス プロパティのサポートにはバグがある可能性があり、IE9 以下ではまったくサポートされていないことに注意する必要があります。

計算された高さ

もうひとつの簡単な解決策は CSS3 calc 機能単位で アルバロの回答で指摘されているように のように、最初の子の高さが既知の値であることが必要です。

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

かなり広くサポートされており、目立った例外は <= IE8 または Safari 5 (サポートなし) と IE9 (部分的サポート) だけです。他のいくつかの問題点としては calc と併用することです。 トランスフォーム または ボックスシャドウ というように、複数のブラウザでテストしてください。

他の選択肢

もし古いサポートが必要なら height:100%; に #down に変更すると、ピンクの div がフルハイトになりますが、ひとつだけ注意点があります。 これはコンテナのオーバーフローを引き起こします。 #up がそれを押し下げるからです。

そのため overflow: hidden; をコンテナに追加して修正します。

あるいは、もし #up の高さが固定されている場合、コンテナ内に絶対的に配置し、padding-top を #down .

さらに、もう一つの選択肢は、テーブル表示を使うことです。

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​