Question

我正在尝试设置一个简单的flexbox布局，其内容在页眉和页脚之间展开，基于this example。当我将适当的HTML直接放在页面模板中时它工作正常，但是当我在React组件中呈现完全相同的HTML时失败。

这是纯HTML：

<div class="box">
  <div class="header">
    <p><b>header</b></p>
  </div>
  <div class="content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

我的style.css在所有情况下都是这样：

html, body {
  height: 100%;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
}

.footer {
  flex: 0 1 40px;
}

当作为静态HTML提供时效果很好。如果我只使用一个root div来提供一个空页面并使用这个HTML使用React渲染相同的东西，我应该得到相同的东西：

<div id="root">
</div>

和这个JS：

class Boxes extends React.Component {

  render() {
    return (
      <div className="box">
        <div className="header">
          <p><b>header</b></p>
        </div>
        <div className="content">
          <p>
            <b>content</b>
            (fills remaining space)
          </p>
        </div>
        <div className="footer">
          <p><b>footer</b> (fixed height)</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(Boxes, null),
  document.getElementById('root')
);

但是中心＆＃34;内容＆＃34;使用React渲染时，窗格不再填充可用的垂直空间。相反，它只是内容的大小。

这适用于Chrome / Mac上的React 15.4.2。

Answer 1

问题是你有一个没有任何CSS的包装器<div id="root">。你应该让root扩展到完整的高度，然后里面的div也会扩展：

#root {
  height: 100%;
}

Answer 2

您可以尝试：{height：100vh}

Flexbox填充React.js组件内部不可用的可用空间

2 个答案: