使flexbox容器高度100%反应js

Question

我正在尝试创建一个3列的弹性盒容器.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%,但它没有显示任何东西.

而在反应中,

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

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

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

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

需要帮忙 :(

Answer 1

您可以通过使用vh单位来实现这一点,然后使用它更有效, %因为您不需要将每个父高度设置为100%,如果您希望子高度为100%.

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

这是60px应用栏高度从视口高度排除