How to make the footer stick to the bottom of page correctly with CSS?

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.