html - 在 React js 中使 flexbox 容器高度为 100%

Question

我正在尝试创建一个 3 列的 flex 盒容器。 3 列部分作品。但我希望他们采用不包括应用栏的完整可用高度。

CSS

.columnContainer {
    display: flex;
    height: 100%;

}
.leftContainer {
    flex : 1;
    height: 200px;
    background-color: black;
}

.rightContainer {
    flex : 1;
    height: 200px;
    background-color: blue;
}

.middleContainer {
    flex : 3;
    height: 200px;
    background-color: green;
}

我添加了 200px 只是为了在屏幕上显示这些列。已尝试 100%，但没有显示任何内容。

在react js部分，

<div>
        <HomeBar />
        <div className={'columnContainer'}>
            <div className={'leftContainer'}>

            </div>
            <div className={'middleContainer'}>

            </div>
            <div className={'rightContainer'}>

            </div>
        </div>
      </div>

需要帮助:(

Answer 1

您可以通过使用“vh”单位来实现这一点，这是比使用百分比更有效的方法，因为如果您希望 child 的高度为 100%，则无需将每个父高度都设置为 100%。

 .columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

这是从视口(viewport)高度中排除 60 像素应用栏高度的示例。