How Can I Make a Flexbox Layout Fill the Entire Browser Window's Vertical Space?

Making a Flexbox Layout Fill the Entire Vertical Space

A flexbox layout can be configured to consume the remaining vertical space in a browser window by setting the flex property of the layout row accordingly.

To achieve this:

1. Set the height of the html, body, and the flexbox wrapper to 100% to inherit the full height.
2. Assign a flex value greater than 1 to the layout row that should expand to fill the height, while leaving the other rows with their original heights.

Here's an example:

.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 */
}

This approach ensures that the layout is vertically aligned, with the third row expanding to fill the remaining space. The min-height property on the columns is used to ensure that they inherit the full height of the third row.

The above is the detailed content of How Can I Make a Flexbox Layout Fill the Entire Browser Window's Vertical Space?. For more information, please follow other related articles on the PHP Chinese website!