Make footer stay at the bottom of the page layout in css
When developing a webpage, the basic layout we need is a header, body, and footer. By default, the footer will not stay at the bottom if there is no content in the body. One of the simple ways to make the footer stick to the bottom is using a CSS flexbox.
Html
<body>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</body>
Css
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
footer {
margin-top: auto;
}
Output: When no content in the body
Output: With content in the body
Css