Footer won't stay at bottom of page and below content-CodePudding

I have a react app with a 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 stylsheets. 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.

CodePudding user response：

You could add below lines inside index.css for example. You can change auto to a fixed value if you want, like 100px.

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3rem;
}

CodePudding user response：

You need to add style to global container:

 html,body,#root {
   display: flex;
   flex-direction: column;
   height: 100%;
  }

then add style to your footer component:

.footer {
 padding-top: auto;
}

I won't recommend using

min-height: 100vh;

it will break on mobile, because of how its calculated.