I have a React application 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 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.
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.
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
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;
}