Sometimes, we want to get the footer to stay at the bottom of a Web page with CSS.
In this article, we’ll look at how to get the footer to stay at the bottom of a Web page with CSS.
How to get the footer to stay at the bottom of a Web page with CSS?
To get the footer to stay at the bottom of a Web page with CSS, we use flexbox.
For instance, we write
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
to add some elements into the body element.
Then we write
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
.footer {
height: 50px;
background-color: red;
}
to make the body a flex container with display: flex;.
We make the flex direction vertical with flex-direction: column;.
And we use flex: 1; to make the div with class spacer take the most room and make the footer element stay at the bottom.
Conclusion
To get the footer to stay at the bottom of a Web page with CSS, we use flexbox.
