How to push a footer to the bottom of the page when content is short or missing with CSS?

Spread the love

To push a footer to the bottom of the page when content is short or missing with CSS, we use flexbox.

For instance, we write

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

to add nested divs.

Then we write

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

to make the outer div a flex container with display: flex;

We set its min height with min-height: 100vh;.

And we set its flex direction to vertical with flex-direction: column;.

We make the inner divs spread vertically apart with justify-content: space-between;.