FLEXBOX: auto die Höhe für das div vertikal ausfüllen Elternteil
Habe ich einige Flexbox-markup, das erfordert einige Aufmerksamkeit.
Alles funktioniert wie gedacht, nur eine Letzte Sache. Ich habe einige divs, die in der Spalte layout, von denen zwei sind in der Höhe gesteuert, die von Inhalt oder Höhe einstellen, und man wird nicht kontrolliert. Dieses Letzte eine, die nicht die Höhe kontrolliert (Farbe gelb in der DEMO), sollten auf einer solchen Höhe, so füllen Sie die verbleibenden vertikalen Raum in seiner übergeordneten div (grün).
Sogar, wenn das Fenster skaliert wird mit diesem "responsive design", das gelbe div soll immer füllen Sie den Boden des grünen parent-div.
<div class="flexbox">
<div class="col">
<h3>RED</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
<div class="col">
<div class="flexbox2">
<div>
<h3>GREEN</h3></div>
<div class="col1">
Set at responsive height 10 vw.
</div>
<div class="col1">
This div should adapt its height automatically to fill out the remaining space.
</div>
</div>
</div>
<style>
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flexbox .col {
flex: 1;
}
.flexbox .col:nth-child(1) {
background: red;
order: 0;
padding: 5px;
}
.flexbox .col:nth-child(2) {
background: green;
order: 1;
padding: 5px;
color: white;
}
.flexbox2 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 5px;
}
.flexbox2 .col1 {
flex: 1;
}
.flexbox2 .col1:nth-child(2) {
background: orange;
height: 10vw;
padding: 5px;
}
.flexbox2 .col1:nth-child(3) {
background: yellow;
padding: 5px;
color: black;
}
</style>
InformationsquelleAutor Eddy | 2016-07-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Machen die Großeltern des gelben div ein flex-container, so dass
align-items: stretch
geht in Kraft, die bewirkt, dass die flex-items (inklusive der Eltern des gelben div) erweitern die volle Höhe des Behälters.Den gelben div wurde bereits füllen den verbleibenden Platz (des Containers). Es war den Eltern (
.flexbox2
), die begrenzt war, in Höhe (innerhalb des Containers).Wenn Sie möchten, dass die orange div fixe
height: 10vw
, müssen Sie entfernen Sie dieflex: 1
angewendet.InformationsquelleAutor Michael_B
Ihre flexbox-parent nimmt nicht die ganze Wandhöhe:
Den gelben flexbox wachsen soll:
https://jsfiddle.net/by4v1ahd/12/
Ich hatte eine zusätzliche Zeile in es. Festen es so das rot und grün haben gleich breiten jetzt. Das gelbe div bis zum unteren für mich
Danke, aber noch keine Dehnung der gelbe div-Element sichtbar ist.
InformationsquelleAutor c2huc2hu