web-dev-qa-db-de.com

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

http://jsfiddle.net/S8g4E/

Ich habe einen Container div mit zwei Kindern. Das erste Kind hat eine bestimmte Größe. Wie kann ich das zweite Kind dazu bringen, den "freien Platz" des Containers div zu belegen, ohne eine bestimmte Höhe anzugeben?

Im Beispiel sollte das pinke div auch den Leerraum belegen.


Ähnlich wie bei dieser Frage: Wie lässt man div die verbleibende Höhe einnehmen?

Aber ich möchte nicht die absolute Position angeben .

95
Alvaro

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;}​
138
Quantastical

Es ist fast zwei Jahre her, seit ich diese Frage gestellt habe. Ich habe mir gerade css calc () ausgedacht, das dieses Problem behebt und dachte, es wäre schön, es hinzuzufügen, falls jemand das gleiche Problem hat. (Übrigens habe ich am Ende die absolute Position verwendet).

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

Hier ist das CSS

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

Und mehr Informationen dazu hier: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Browser-Unterstützung: http://caniuse.com/#feat=calc

22
Alvaro

Meine Antwort verwendet nur CSS und keinen Überlauf: versteckt oder Anzeige: Tabellenzeile. Es setzt voraus, dass das erste Kind wirklich eine bestimmte Größe hat, aber in Ihrer Frage geben Sie an, dass nur für das zweite Kind die Größe nicht angegeben werden muss, und ich glaube, Sie sollten dies für akzeptabel halten.

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

Sofern ich nichts falsch verstehe, können Sie einfach height: 100%; Und overflow:hidden; Zu #down Hinzufügen.

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

Live DEMO

Bearbeiten: Da Sie overflow:hidden; Nicht verwenden möchten, können Sie für dieses Szenario display: table; Verwenden. Es wird jedoch nicht vor IE 8. ( display: table; - Unterstützung ) unterstützt.

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

Live DEMO

Hinweis: Sie haben angegeben, dass die Höhe #down Die Höhe #container Minus die Höhe #up Sein soll. Die display:table; - Lösung macht genau das und diese jsfiddle wird das ziemlich deutlich darstellen.

2
Josh Mein

überprüfen Sie die Demo - http://jsfiddle.net/S8g4E/6/

benutze 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

Sie können floats verwenden, um Inhalte nach unten zu verschieben:

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

Sie haben einen Container mit fester Größe:

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

Der Inhalt darf neben einem Float fließen. Es sei denn, wir setzen den Schwimmer auf volle Breite:

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

Während #up und #down teilen die oberste Position, #down 's Inhalt kann erst nach dem Ende des floated #up:

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