138

http://jsfiddle.net/S8g4E/

私は2人の子供を持つコンテナを持っていdivます。最初の子には指定された高さがあります。div特定の高さを指定せずに、2 番目の子をコンテナの「空き領域」に占有させるにはどうすればよいですか?

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

この質問に似ています: div が残りの高さを占めるようにする方法は?

しかし、絶対的な位置を与えたくありません。

4

8 に答える 8

191

子を拡張し#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>

グリッド

Flexbox モデルほど単純ではないかもしれませんが、 CSS のgridレイアウトはさらに別のオプションを提供します。ただし、コンテナ要素のスタイル設定のみが必要です。

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

はgrid-template-rows、最初の行を固定の 100 ピクセルの高さとして定義し、残りの行は残りのスペースを埋めるために自動的に引き伸ばされます。

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

フレックスボックス

CSS3 のフレキシブル ボックス レイアウト モジュール ( flexbox)は現在十分にサポートされており、非常に簡単に実装できます。柔軟性があるので、#up高さが決まっていなくても使えます。

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

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

計算された高さ

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

#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;}​
于 2012-06-27T12:19:14.870 に答える
25

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

于 2014-02-20T06:19:02.283 に答える
5

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

#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;
}
<div id="container">
  <div id="up">Text<br />Text<br />Text<br /></div>
  <div id="down">Text<br />Text<br />Text<br /></div>
</div>

于 2013-03-04T22:07:40.233 に答える
2

私が誤解していない限り、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はそれをかなり明確に表現します。

于 2012-06-27T12:16:07.193 に答える
2

デモを確認してください - 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;}
于 2012-06-27T12:20:22.673 に答える
1

フロートを使用してコンテンツを押し下げることができます。

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

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

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

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

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

while #upand #downshare the top position,#downのコンテンツは float の一番下の後にのみ開始できます#up:

#down {
    height:100%;
}​
于 2012-06-27T12:22:13.567 に答える
-2

錯覚で偽装することに慣れていない限り、純粋に CSS で実行できるかどうかはわかりません。Josh Meinの回答を使用して、に設定#containerしてoverflow:hiddenください。

価値のあるものとして、ここにjQueryソリューションがあります：

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);
于 2012-06-27T12:19:57.693 に答える