如何讓 Flexbox 行填滿瀏覽器視窗中剩餘的垂直空間？

讓 Flexbox 版面配置剩餘的垂直空間

Flexbox 版面的第三行需要動態擴充以填入瀏覽器視窗的剩餘高度。為此，請採取以下步驟：

1. 將 html、body 和父級 Flexbox 容器 (.wrapper) 的高度設定為 100% 以繼承父級的完整高度。
2. 僅對第三行 (.row3) 應用大於 1 的 Flex 值，使其他行保留其原始高度。這將使 .row3 能夠成長。
3. 在 .wrapper 類別中加入以下程式碼，以確保列識別完整的瀏覽器高度：

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

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