繁体   English   中英

弹性填充React中的剩余空间

[英]Flex fill remaining space in React

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM