我正在尝试设置一个简单的 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')
);
但是当我使用 React 渲染时,中心“内容” Pane 不再填充可用的垂直空间。相反,它只是根据内容调整大小。
这是在 Chrome/Mac 上使用 React 15.4.2。
最佳答案
问题是你有一个包装器 <div id="root">
没有任何CSS。你应该让 root 展开到完整高度,然后里面的 div 也会展开:
#root {
height: 100%;
}
关于reactjs - 用于填充可用空间的 Flexbox 在 React.js 组件内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44468176/