在 React 中，页脚不会停留在页面底部和内容下方

Question

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 1

You could add the 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;
}

That would do the job. Additionally you can make sure there isn't some padding or margin coming from the outside, I mean the div with root id, body and html , to avoid any unnecessary horizontal scroll.

Answer 2

You need to add style to global container:

 html,body,#root {
   display: flex;
   flex-direction: column;
   min-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.

Answer 3

In index.css add this:

Footer {
width: 300px;
text-align: center;
position: relative;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

Example: https://codesandbox.io/embed/quirky-sound-bitt9k?fontsize=14&hidenavigation=1&theme=dark

You can change position: fixed; if you want the footer section to show at the bottom of the page relative to the viewport, rather than relative to the page content.

Sources for your reference:

https://getridbug.com/html/transform-translate-50-50/ https://www.w3schools.com/css/css_positioning.asp

Answer 4

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;
}