在 React js 中使 flexbox 容器高度为 100%答案

【问题标题】：Making a flexbox container height 100% in react js在 React js 中使 flexbox 容器高度为 100%
【发布时间】：2018-10-29 11:33:33
【问题描述】：

我正在尝试创建一个 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%，但没有显示任何内容。

在 react js 部分，

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

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

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

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

需要帮助:(

【问题讨论】：

检查我的答案@Kim。希望对你有帮助:)
这能回答你的问题吗？ How to make React Flexbox stretch to full screen height

标签： html css reactjs flexbox

【解决方案1】：

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

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

这是一个将 60px 应用栏高度排除在视口高度之外的示例。

【讨论】：

但这会给您带来移动设备的问题，因为键盘会改变实际的vh
您的回答似乎适用于this question too。感谢您提供简洁的解决方案！

【解决方案2】：

查看 patelarpan 的回答，了解一种简单的方法

您必须将最外层容器的高度设置为 100%。这是您的固定代码（基于您的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>

【讨论】：