1

I have a contact page component that does not fill the viewport, so I need to flex-grow the content section to keep the footer at the bottom. Unfortunately this vanilla solution didn't work in my React project. I adapted it to what I thought would work:

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;
}
dooblr
  • 458
  • 1
  • 5
  • 18
  • Are you sure router takes a prop of className? Can you inspect the element and make sure "content-container" is an active class in the document? Reproducing with a minimal example in a react fiddle https://jsfiddle.net/boilerplate/react-jsx may help – Jake Aug 28 '19 at 23:52
  • In most/all cases, using `100%` for an element height does not cause it to fill all the available vertical space instead. If you don't have elements above or below `.app-container`, you could try `height: 100vh` which _does_ take the full height. – Nikolas Stevenson-Molnar Aug 28 '19 at 23:52
  • `flex-flow: column;` shouldn't that be `flex-direction: column;` ? [**The rest looks fine**](https://jsfiddle.net/4dqbyzso/) – John Ruddell Aug 28 '19 at 23:53
  • Use `position: fixed` for the footer or make a margin bottom fo the page so you can see the footer. can you upload the code? – Omer Aug 29 '19 at 00:11

1 Answers1

0

This seems to be working just fine as you can see with this fiddle

I believe the issue you are having is that you can't give a Router a className as it is not an actual element on the page. Therefore your content-container class needs to be applied to the individual component wrappers within the component itself.

Jake
  • 712
  • 7
  • 20