如何讓 Flexbox 佈局填滿整個瀏覽器視窗的垂直空間？

使Flexbox 佈局填充整個垂直空間

可以透過設定Flexbox 的flex 屬性來配置Flexbox 版面配置以消耗瀏覽器視窗中剩餘的垂直空間相應地佈局行。

要實現此目的：

1. 設定行的高度將 html、body 和 Flexbox 包裝器設定為 100% 以繼承完整高度。
2. 為應擴展以填充高度的佈局行分配大於 1 的 Flex 值，同時保留其他行的原始高度高度。

這是一個範例：

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

此方法可確保版面是垂直的對齊，第三行擴充以填滿剩餘空間。列上的 min-height 屬性用於確保它們繼承第三行的完整高度。

以上是如何讓 Flexbox 佈局填滿整個瀏覽器視窗的垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！