如何使 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中文网其他相关文章！