Sometimes you don't have enough content in the main section of the project and the footer comes up and you want to have it as a sticky footer on the bottom of the page even when the content is less. In this article, I gonna show you how you can fix this issue.
Assuming this structure:
<body>
<header><!-- ... --></header>
<main>
<!--
Your content
-->
</main>
<footer><!-- ... --></footer>
</body>
Add these codes for the CSS:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
I hope it would be helpful for you
Top comments (2)
I add rather use
margin-top: autoon the footer and remove theflex-grow:1(related: stackoverflow.com/a/47640893/8620333)Thank you for sharing your experience Temani :)