在React JS中将Flexbox容器高度设置为100％ [英] Making a flexbox container height 100% in react js

问题描述

我正在尝试创建一个3列的伸缩框容器. 3列部分起作用.但我希望他们将应用栏以外的高度全部保留.

I'm trying to create a flex box container of 3 columns. 3 column part works. But I want them to take complete available height excluding the app bar.

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％，但没有显示任何内容.

I have added 200px just to show those columns on screen. Tried 100% but it didnt show anything.

在react js部分，

And in react js part,

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

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

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

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

需要帮助:(

推荐答案

请参阅patelarpan的答案，以方便地完成此操作

see patelarpan's answer for a easy way to do this

您必须将最外层容器的高度设置为100％.这是您的固定代码(基于您的小提琴)

You have to set the outermost container's height to 100%. Here is your fixed code(based on your fiddle)

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      items: [{
          text: "Learn JavaScript",
          done: false
        },
        {
          text: "Learn React",
          done: false
        },
        {
          text: "Play around in JSFiddle",
          done: true
        },
        {
          text: "Build something awesome",
          done: true
        }
      ]
    }
  }

  render() {
    return (
       <div className={'container'}>
        
        <div className={'columnContainer'}>
            <div className={'leftContainer'}>

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

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

            </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render( < TodoApp / > , document.querySelector("#app"))

html,
body {
  height: 100%;
}

#app {
  height: 100%;
}

.container {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

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

.leftContainer {
  height: 100%;
  flex: 1;
  margin: 10px;
  background-color: black;
}

.rightContainer {
  flex: 1;
  margin: 10px;
  background-color: black;
  height: 100%;
}

.middleContainer {
  flex: 2;
  margin: 10px;
  background-color: black;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

这篇关于在React JS中将Flexbox容器高度设置为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！