How to Keep a Footer at the Bottom but NOT Fixed

How can we style a footer so that it stays at the bottom of a page?

Suppose we’re working with the following HTML layout.

<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Footer</footer>
</div>

In this scenario, we have two criteria:

1. If the <section> content is shorter in height than the page, the footer should stick to the bottom of the page.
2. If the <section> content is taller in height than the page, the footer should trail below all the content (it should not be fixed or visible until the user scrolls all the way down).

html, body {
  height: 100%;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
}

The solution to this problem is quite simple using flexbox.

The idea here is to use flex: 1, which is equivalent to flex: 1 1 0 (in most browsers).

We are specifying the following:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-grow will dictate the amount of available space an element should take up inside a flex container. Setting it to 1 in this case means that it will take up all remaining, available space.

If the <section> content is shorter than the page height, then there will be lots of space to fill (since .container will always have a height of at least 100%), thereby pushing the footer to the bottom.

If this solution does not work, I’ve found that setting the minimum height of the container to a value dependent on the footer height often helps.

Suppose the footer height is 60px.

.container {
  min-height: calc(100% - 60px);
  ...
}