Wie kann ich dafür sorgen, dass ein Flexbox-Layout den gesamten vertikalen Raum des Browserfensters ausfüllt?

Ein Flexbox-Layout erstellen, das den gesamten vertikalen Raum ausfüllt

Ein Flexbox-Layout kann so konfiguriert werden, dass es den verbleibenden vertikalen Raum in einem Browserfenster einnimmt, indem die Flex-Eigenschaft des festgelegt wird Layouten Sie die Zeile entsprechend.

Um dies zu erreichen:

1. Stellen Sie die Höhe des HTML-Codes, des Textkörpers und der Flexbox ein Wrapper auf 100 %, um die volle Höhe zu erben.
2. Weisen Sie der Layoutzeile, die erweitert werden soll, um die Höhe auszufüllen, einen Flex-Wert größer als 1 zu, während die anderen Zeilen ihre ursprünglichen Höhen beibehalten.

Hier ist ein Beispiel:

.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; /* Set flex value greater than 1 */
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Ensure that the columns inherit the full height */
}

Dieser Ansatz stellt sicher, dass das Layout vertikal ausgerichtet ist und die dritte Zeile erweitert wird, um das auszufüllen verbleibender Platz. Die Eigenschaft „min-height“ für die Spalten wird verwendet, um sicherzustellen, dass sie die volle Höhe der dritten Zeile erben.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Flexbox-Layout den gesamten vertikalen Raum des Browserfensters ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!