web-dev-qa-db-ja.com

div（高さ）が親の残りの高さを占めるようにする

http://jsfiddle.net/S8g4E/

2つの子を持つコンテナdivがあります。最初の子には所定の高さがあります。特定の高さを与えずに、2番目の子がコンテナdivの「空き領域」を占有するようにするにはどうすればよいですか？

この例では、ピンクのdivは空白も占める必要があります。

この質問と同様： divが残りの高さを占めるようにする方法？

しかし、position absoluteを与えたくありません。

htmlcssheightparent
95
Alvaro

#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-プレフィックスが必要であると確信しているため、サポートするブラウザーの機能を検証してください。

Flexbox

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

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

いくつかのflexboxプロパティに対するIE10およびIE11のサポートにはバグがあり、IE9以下ではまったくサポートされていないことに注意することが重要です。

計算された高さ

別の簡単な解決策は、 CSS3 calc 機能単位、 Alvaroが答えで指摘しているように を使用することですが、最初の子の身長は既知の値：

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

注目すべき例外はIE8またはSafari 5（サポートなし）およびIE9（部分サポート）のみであり、かなり広くサポートされています。その他の問題には、calcをtransformまたはbox-shadowと組み合わせて使用​​することが含まれます、それが懸念される場合は、複数のブラウザでテストしてください。

その他の選択肢

古いサポートが必要な場合は、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;}​
138
Quantastical

この質問をしてからほぼ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

22
Alvaro

私の答えは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/

4
T.W.R. Cole

誤解がない限り、height: 100%;とoverflow:hidden;を#downに追加するだけです。

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

ライブデモ

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

#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;ソリューションはまさにそれを行い、 this jsfiddle はそれをかなり明確に描写します。

2
Josh Mein

デモを確認してください- 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;}
2
Dipak

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

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

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

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

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

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

#upと#downは上部の位置を共有しますが、#downのコンテンツは、フロートされた#upの下部からしか開始できません。

#down {
    height:100%;
}​
1
biziclop