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