CSS: How to fix the footer to the bottom of the page in 2020
Oct 22, 2020
With just 4 lines of CSS
The markup
As long as you have content and a footer you are good, you can apply the styling to the body if you want. Or the #app div. Where ever you like.
<body> // or some div
<header>
this is a header
</header> <main>
your page content goes in here
</main> <footer>
this is a footer
</footer>
</body>
The styling
Do not use absolute. Use flex. Its 2020.
Do not support browsers like IE9. Its bad for developers.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}body main {
margin-bottom: auto;
}
If you want your content to fill the available space, which will have the same effect, you can use flex instead of margin auto
body main {
flex: 1 auto;
/* margin-bottom: auto; */
}/* if you want your content children to have % heights you have to explicitly set the height of your content wrapper */
body main{
/* flex: 1 auto; */
height: calc(100vh - 60px - 150px);
}
CodeSandbox demo and code available: here
Leave a 👏 Clap it if you like it.
Comment 🗨️ to contribute.
🎉 Go fourth and conquer! 🎉