Das Erweitern des untergeordneten Elements #down, um den verbleibenden Speicherplatz zu füllen, #containerkann auf verschiedene Arten erfolgen, je nachdem, welche Browserunterstützung Sie erreichen möchten und ob #upeine definierte Höhe vorliegt 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 gridLayout von CSS bietet eine weitere Option, die jedoch möglicherweise nicht so einfach ist wie das Flexbox-Modell. Es ist jedoch nur das Styling des Containerelements erforderlich:
.container { display: grid; grid-template-rows: 100px }
Das grid-template-rowsdefiniert die erste Zeile als feste Höhe von 100 Pixel, und die verbleibenden Zeilen werden automatisch gedehnt, um den verbleibenden Platz auszufüllen.
Ich bin mir ziemlich sicher, dass IE11 -ms-Präfixe erfordert. Überprüfen Sie daher die Funktionalität in den Browsern, die Sie unterstützen möchten.
Flexbox
Das Flexible Box Layout Module ( flexbox) von CSS3 wird jetzt gut unterstützt und kann sehr einfach implementiert werden. Da es flexibel ist, funktioniert es auch, wenn #upkeine Höhe definiert ist.
#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 besteht darin, die CSS3-calc Funktionseinheit zu verwenden, wie Alvaro in seiner Antwort hervorhebt. Die Größe des ersten Kindes muss jedoch ein bekannter Wert sein:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Es wird ziemlich häufig unterstützt, mit den einzigen bemerkenswerten Ausnahmen <= IE8 oder Safari 5 (keine Unterstützung) und IE9 (teilweise Unterstützung). Einige andere Probleme umfassen die Verwendung von calc in Verbindung mit Transformation oder Box-Shadow. Testen Sie daher unbedingt in mehreren Browsern, ob dies für Sie von Belang ist.
Andere Alternativen
Wenn ältere Unterstützung benötigt wird, können Sie hinzufügen height:100%;, #downdass das rosa Div mit einer Einschränkung die volle Höhe erreicht. Dies führt zu einem Überlauf des Behälters, da #updieser nach unten gedrückt wird.
Daher können Sie overflow: hidden;dem Container etwas hinzufügen, um dies zu beheben.
Wenn die Höhe von #upfestgelegt ist, können Sie sie auch absolut innerhalb des Behälters positionieren und eine Polsterplatte hinzufügen #down.
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;}