相关疑难解决方法(0)

我正在尝试创建一个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>

需要帮忙 :(