div（高さ）が親の残りの高さになるようにする

http://jsfiddle.net/S8g4E/

私はdiv2人の子供がいるコンテナを持っています。最初の子は所定の高さです。div特定の高さを指定せずに、2番目の子がコンテナの「空きスペース」を占めるようにするにはどうすればよいですか？

この例では、ピンク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固定された100ピクセルの高さである第1の行を定義し、行が自動的に残りの空間を充填するように延伸します残ります。

IE11には-ms-プレフィックスが必要だと思いますので、サポートするブラウザの機能を検証してください。

フレックスボックス

CSS3のフレキシブルボックスレイアウトモジュール（flexbox）がサポートされ、実装が非常に簡単になりました。柔軟性があるため、#up高さが定義されていなくても機能します。

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

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

計算された高さ

別の簡単な解決策は、CSV3calc機能ユニットを使用することです。Alvaro が彼の回答で指摘していますが、最初の子の高さが既知の値である必要があります。

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

かなり広くサポートされていますが、注目すべき例外は<= IE8またはSafari 5（サポートなし）およびIE9（部分サポート）だけです。その他の問題には、変換またはボックスシャドウと組み合わせたcalcの使用が含まれるため、問題がある場合は、複数のブラウザーでテストしてください。

他の選択肢

古いサポートが必要な場合は、追加height:100%;し#downてピンクのdivを完全な高さにすることができますが、1つの注意点があります。#upが押し下げているため、コンテナにオーバーフローが発生します。

したがって、それoverflow: hidden;を修正するためにコンテナに追加できます。

または、の高さ#upが固定されている場合は、それをコンテナ内に完全に配置し、パディングトップをに追加できます#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;}​

私がこの質問をしてからほぼ2年になります。私が持っていたこの問題を解決するcss calc（）を思いついただけで、誰かが同じ問題を抱えている場合に備えて追加するとよいと思いました。（ちなみに私は最終的に絶対位置を使用しました）。

http://jsfiddle.net/S8g4E/955/

ここにCSSがあります

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

そして、それについての詳細はこちら：http : //css-tricks.com/a-couple-of-use-cases-for-calc/

ブラウザのサポート：http : //caniuse.com/#feat=calc

私の答えはCSSのみを使用し、overflow：hiddenまたはdisplay：table-rowを使用していません。最初の子には実際に高さが指定されている必要がありますが、質問では、2番目の子だけに高さを指定する必要がないと述べているので、これは許容できると思います。

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

CSS

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

デモを確認してください-http://jsfiddle.net/S8g4E/6/

CSSを使用-

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

私が誤解しているのでなければ、height: 100%;とoverflow:hidden;を追加するだけ#downです。

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

ライブデモ

編集：を使用したくないので、このシナリオでoverflow:hidden;使用できますdisplay: table;。ただし、IE 8より前のバージョンではサポートされていません（display: table;サポート）。

#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;
}​

ライブデモ

注：あなたは#down高さを#container高さから#up高さを引いたものにしたいと言っていました。display:table;ソリューションは、まさにしていると、このjsfiddleはかなり明確ことを描写します。

フロートを使用してコンテンツをプッシュダウンできます。

http://jsfiddle.net/S8g4E/5/

固定サイズのコンテナがあります：

#container {
    width: 300px; height: 300px;
}

コンテンツはフロートの横に流れることができます。フロートを全幅に設定しない限り：

#up {
    float: left;
    width: 100%;
}

最上位#upを#down共有している間、#downのコンテンツは、フロートの最下位の後にのみ開始できます#up。

#down {
    height:100%;
}​

概要

満足のいく答えが見つからなかったので、自分で見つけなければなりませんでした。

私の要件：

• 要素は、コンテンツサイズが残りのスペースサイズよりも小さいか大きい場合に、残りのスペースを正確に使用する必要があります（2番目の場合）。スクロールバーがなければならない示すこと）。
• ソリューションは、親の高さが計算され、指定されていない場合に機能する必要があります。
• calc()残りの要素は別の要素のサイズについて何も認識していないため、使用しないでください。
• 現代となじみレイアウト技術などflexboxesを使用する必要があります。

ソリューション

• 計算された高さ（存在する場合）を持つすべての直接の親をフレックスボックスに変換しますを、高さが指定されている次の親であるます。
• 計算された高さ（存在する場合）を持つすべての直接の親に指定flex-grow: 1すると要素を、要素のコンテンツサイズが小さい場合に残りのスペースをすべて使用できるようにします。
• 要素のコンテンツサイズが残りのスペースサイズよりも大きくなっても小さくならないように、高さが固定さflex-shrink: 0れたすべてのフレックスアイテムを指定します。
• 計算された高さ（ある場合）を持つすべての直接の親に指定overflow: hiddenして、スクロールを無効にし、オーバーフローコンテンツの表示を禁止します。
• 要素に指定するoverflow: autoと、要素内でのスクロールが可能になります。

JSFiddle（要素には、計算された高さの直接の親があります）

JSFiddle（単純なケース：高さが計算された直接の親はありません）

あなたが幻想でそれを偽造することに慣れていない限り、CSSでそれを純粋に行うことができるかどうかはわかりません。Josh Meinの回答を使用#containerして、overflow:hiddenます。

価値のあるものとして、jQueryソリューションを次に示します。

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);