Locking the Footer to Absolute Bottom

Dec 10, 2015

This is something I've seen a lot of newer developers struggle with. They create a website, but their content doesn't quite fill up the page. As a consiquence, their footer element doesn't go all the way to the bottom of the viewport. To fix this they usually either put more content on the page or fix it to the bottom like this:

footer {
  position: fixed;
  bottom: 0;
}

The problem with fixing the footer to the bottom is that it's always showing and your content just slides under it. If that's what you're looking for, great! But what if you have a huge footer? (Check out the size of this footer: http://www.samrayner.com/). I suspect most of you out there would rather have your footer stuck to the absolute bottom, no matter how much content is on the page. Luckily for you, I have a simple solution. Let's set up a simple index.html to get started:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Locking the Footer to the Bottom</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> <!-- Make sure CSS is in the same folder as HTML -->
</head>
<body>
  <header>
    Locking the Footer to the Bottom!
  </header>
  <section>
    Whatever content you want.
  </section>
  <footer>
    Some footer stuff!
  </footer>
</body>
</html>

For visual seperation purposes, set the background color of the footer element.

footer {
  background: #777;
  color: #fff; /* Setting the font color to white since the background is really dark */
}

Now it's easy to see that the footer element is right below the section element. But now the goal is to get that footer to the bottom without adding more content or fixing it to the bottom of the viewport. This can be accomplished with the height, position, and bottom properties in CSS. Notice that the footer element is a direct child of the body element. This is important, because you need to set the height of all the containing elements to 100%, except for the direct parent element. That one you set the min-height to 100%. Make sure those containing elements have their position set to relative, then set the position of the footer to absolute. Place it at the bottom by using the bottom property and setting it to 0. That's it, you're done. If that was a little confusing, here's the CSS code to do this:

html {
  height: 100%;
}

html,
body {
  position: relative;
}

body {
  min-height: 100%;
  margin: 0; /* Browser margins make the page bigger. Remove them for now. */
             /* This also happens with p, h1, h2, ... */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%; /* Optional */
  
  /* Code from earlier */
  background: #777;
  color: #fff
}

Remember, the body element is the direct parent of the footer element, that's why min-height is being used. The html element is a parent of footer, but not the direct parent which is why it uses the height property.

Hopefully this simple, but powerful trick helps you keep those footers where they belong. At the foot of the page.