Wie kann ich dafür sorgen, dass eine Flexbox-Zeile den verbleibenden vertikalen Raum in einem Browserfenster ausfüllt?

Ihr Flexbox-Layout den verbleibenden vertikalen Platz einnehmen lassen

Die dritte Zeile eines Flexbox-Layouts muss dynamisch erweitert werden, um die verbleibende Höhe des Browserfensters auszufüllen. Um dies zu erreichen, führen Sie die folgenden Schritte aus:

1. Setzen Sie die Höhe von HTML, Body und dem übergeordneten Flexbox-Container (.wrapper) auf 100 %, um die volle Höhe des übergeordneten Containers zu erben.
2. Wenden Sie einen Flex-Wert größer als 1 nur auf die dritte Reihe (.row3) an und belassen Sie die anderen Reihen bei ihren ursprünglichen Höhen. Dadurch kann .row3 wachsen.
3. Fügen Sie den folgenden Code innerhalb der .wrapper-Klasse hinzu, um sicherzustellen, dass die Spalten die volle Browserhöhe erkennen:

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass eine Flexbox-Zeile den verbleibenden vertikalen Raum in einem Browserfenster ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!