Lassen Sie div (height) die verbleibende Höhe des Elternteils belegen

Das Erweitern des untergeordneten Elements #down, Um den verbleibenden Bereich von #container Auszufüllen, kann auf verschiedene Arten erfolgen, je nachdem, welche Browserunterstützung Sie erzielen möchten und ob #up Eine definierte Höhe hat oder nicht .

Proben

.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>

Gitter

Das grid -Layout von CSS bietet noch eine weitere Option, obwohl es möglicherweise nicht so einfach ist wie das Modell Flexbox=). Es muss jedoch nur das Containerelement formatiert werden:

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

Mit grid-template-rows Wird die erste Zeile als feste Höhe von 100 Pixel definiert, und die verbleibenden Zeilen werden automatisch gestreckt, um den verbleibenden Raum auszufüllen.

Ich bin mir ziemlich sicher, dass IE11 Präfixe -ms- Benötigt. Stellen Sie daher sicher, dass Sie die Funktionalität in den Browsern validieren, die Sie unterstützen möchten.

Flexbox

CSS3s Flexible Box Layout Module (flexbox) wird jetzt gut unterstützt und kann sehr einfach implementiert werden. Da es flexibel ist, funktioniert es auch, wenn #up Keine definierte Höhe hat.

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

Es ist wichtig zu beachten, dass die IE10- und IE11-Unterstützung für einige flexbox Eigenschaften fehlerhaft sein kann und IE9 oder niedriger überhaupt keine Unterstützung bietet.

Berechnete Höhe

Eine andere einfache Lösung ist die Verwendung der Funktionseinheit CSS3 calcwie Alvaro in seiner Antwort hervorhebt , allerdings muss die Größe des ersten Kindes angegeben werden ein bekannter Wert:

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

Es wird weitgehend unterstützt, mit den einzigen bemerkenswerten Ausnahmen <= IE8 oder Safari 5 (keine Unterstützung) und IE9 (teilweise Unterstützung). Einige andere Probleme beinhalten die Verwendung von calc in Verbindung mit transform oder box-shadow, testen Sie also unbedingt in mehreren Browsern wenn dir das etwas ausmacht.

Andere Alternativen

Wenn ältere Unterstützung benötigt wird, können Sie height:100%; Zu #down Hinzufügen, um das Pink Div ​​mit einer Einschränkung auf die volle Höhe zu bringen. Dies führt zu einem Überlauf des Containers, da #up Ihn nach unten drückt.

Daher können Sie dem Container overflow: hidden; Hinzufügen, um dies zu beheben.

Wenn alternativ die Höhe von #up Festgelegt ist, können Sie sie absolut innerhalb des Containers positionieren und #down Ein Polster hinzufügen.

Eine weitere Option wäre die Verwendung einer Tabellenanzeige:

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