Sometimes, we want to make the footer stick to the bottom of page correctly with CSS
In this article, we’ll look at how to make the footer stick to the bottom of page correctly with CSS
How to make the footer stick to the bottom of page correctly with CSS?
To make the footer stick to the bottom of page correctly with CSS, we use flexbox.
For instance, we write
<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>
to add nested divs.
Then we write
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.parent {
height: 500px;
border: 1px solid black;
}
.parent div {
border: 1px solid red;
}
to make the outer div a flex container with display: flex;
.
Then we make its flex direction vertical with flex-direction: column;
.
And then we use justify-content: space-between;
to spread the child divs out vertically.
Conclusion
To make the footer stick to the bottom of page correctly with CSS, we use flexbox.