弹性填充React中的剩余空间

Question

我有一个无法填充视口的联系人页面组件，因此我需要灵活地增加内容部分，以使页脚位于底部。 不幸的是， 这个原始的解决方案在我的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;
}

Answer 1

正如您在此小提琴中看到的那样，这似乎工作得很好

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