CSS 100% 高度在 React 应用程序中不起作用

Question

我正在尝试在我的 React 应用程序中使用 Flexbox 来创建一个简单的两列网页，该网页占据整个宽度和高度。

我可以让它自己使用 HTML 和 CSS，但不能在 React 应用程序中使用。

到目前为止我有:

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

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

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

和:

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

我意识到我需要考虑额外的 <div id="root"></div>在我的标签 index.html所以我还在我的 CSS 中添加了以下内容:

#root {
  height: 100%;
}

还有我的render功能:

render() {
  return (
    <div className="flexbox">
      <div className="left">Left</div>
      <div className="right">Right</div>
    </div>
  )
}

但这行不通。列存在但不是全高。为什么不呢？

Answer 1

如果您使用 create-react-app，它会添加一个带有 class=App 的元素和一个带有 id=root 的元素到DOM。他们还应该得到 height: 100%

html, body, #root, .App {
  height: 100%;
}