Keeping the Footer down

The footer can be a nightmare. Here’s a couple of methods to keep the footer at the bottom of the page when there is not enough content to do so.

Using grid

This is my preferred solution. Both header and footer are flexible and take up as much room as they require.

Assume the following HTML:

<div class="container">
    <header></header>
    <main></main>
    <footer></footer>
</div>

And the CSS is:

.container {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

Using flexbox

Another cool way is to use flexbox and the footer top margin set to auto.

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer {
    margin-top: auto;
}

This has the advantage over grid that you can add more elements in the container without breaking it.

Collapsing margins

HOWEVER bear in mind that whereas normal block level items like paragraphs and headings have their top and bottom margins collapse into one another. In other words the space between two paragraphs is 1em even though each paragraph has 1em of margin for their top and bottom.

But when an element is a flex child this collapsing does not occur. A paragraph followed by another paragraph will have 2em of spacing, double what may be expected.

See JS Fiddle example for examples including grid version too.

Stephanie offers some optional CSS:

.container {
  margin: 0 auto;
  /* or: align-self: center */
  max-width: 80ch;
}

Using Calc

In this solution I used an element to wrap only the the header and content blocks together: .container.

Then used calc to push the footer down..

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

footer {
    height: 70px;
}

This assumes you want a margin of 30px (100px - 70px) before the footer. However I found this left a gap at the bottom and put the footer height the same as in calc: 100px.

It may help if the background color of the body is the same as the footer and then colour the container or content div.

The main con with this method is that you need a fixed height for footer.

More solutions

There are other solutions all of which have pros and cons.

1. Modern CSS has a great article on the flexbox and grid methods and compares them.
2. CSS Tricks
3. Stack Overflow