Flex 填充 React 中的剩余空间答案

【问题标题】：Flex fill remaining space in ReactFlex 填充 React 中的剩余空间
【发布时间】：2020-01-02 04:54:14
【问题描述】：

我有一个不填充视口的联系页面组件，因此我需要弹性增长内容部分以将页脚保持在底部。不幸的是，this vanilla solution 在我的 React 项目中不起作用。我把它改编成我认为可行的：

App.js：

import ...

function App() {
  return (
    <div className="app-container">
      <NavigationBar className="nav-container"/>
      <Router className="content-container">
          <Route exact path="/" component={HomePage} />
          <Route exact path="/home" component={HomePage} />
          <Route path="/classes" component={GroupClasses} />
          <Route exact path="/lessons" component={PrivateLessons} />
          <Route exact path="/contact" component={Contact} />
      </Router>
      <Footer className="footer-container"/>
    </div>
 );
}

App.css

html,
body,
#root{
  height:100%;
  margin: 0
}

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

.nav-container{
  flex: 0 1 auto;
}
.content-container{
  flex: 1 1 auto;
}
.footer-container{
  flex: 0 1 auto;
}

【问题讨论】：

你确定路由器需要一个类名的道具吗？您可以检查元素并确保“内容容器”是文档中的活动类吗？在反应小提琴jsfiddle.net/boilerplate/react-jsx 中使用最小示例进行复制可能会有所帮助
在大多数/所有情况下，使用100% 元素高度不会导致它填充所有可用的垂直空间。如果您没有高于或低于.app-container 的元素，您可以尝试height: 100vh，它确实占据了整个高度。
flex-flow: column; 不应该是 flex-direction: column; 吗？ The rest looks fine
使用position: fixed 作为页脚或在页面底部留出一个边距，以便您可以看到页脚。可以上传代码吗？

标签： html css reactjs flexbox

【解决方案1】：

正如您在this fiddle 中看到的那样，这似乎工作得很好

我相信您遇到的问题是您不能提供 Router 和 className，因为它不是页面上的实际元素。因此，您的 content-container 类需要应用于组件本身的各个组件包装器。

【讨论】：