Footer won’t stay at bottom of page and below content in React

I have a React application with this basic layout:

function App() {
  return (
    <div className="app">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;

My issue is that I have separate stylesheets for each of these components, but I can’t get my footer to both be at the bottom of the page, and always stay below content. That is, if the page is blank, the footer would still be at the bottom, and if there was content that was larger than the viewport height, the footer would still remain under it.

I’ve seen answers to this issue, but only with regular HTML pages, not with different React components with different stylesheets. I have an index.css, App.css, and CSS pages for each of my App components.

Is there a way I should go about it? Which stylesheet should I add the code to have the footer stay at the bottom and below the content. I currently have code in my Footer.css, but the code doesn’t keep the footer at the bottom of the page and below content.

I think the issue is that usually all the components are on the same HTML page within the body, but React is broken up a little differently. Any help would be great.

Answer

I was having an issue using grid and grid-template-rows, but switching to flex did the trick.

My understanding is that using a flex-direction: column; and justify-content: space-between; spaces my three components and forces my <Footer /> underneath <Main /> no matter the viewport height.

If anyone has a better understanding of why my answer works better than others, I’d love an explanation.

index.css file:

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Advertisement

Answer