Use pure CSS to create “sticky” footers on a web page

By: Bluemix Infrastructure

Use pure CSS to create “sticky” footers on a web page

We’re fascinated by how much JavaScript has evolved and how much you can do with jQuery these days. We’re advocates of working smarter—not harder—and that maxim knows no coding language limits. In this post, we’re sharing a pure CSS solution that allows for “sticky” footers on a web page. In comparing several different techniques to present this functionality, we found that other routes were overkill when it came to processing time and resource usage.

Our objective is simple: Make the footer of our web page stay at the bottom even if the page’s content area is shorter than the user’s browser window.

This, by far, is one of our favorite things to do. It makes the web layout so much more appealing and creates a very professional feel. We ended up kicking ourselves the very first time we tried to add this functionality to a project early on when we found out just how easy it was. We take solace in knowing that we’re not alone, though—a quick search for “footer stick bottom” still yields quite a few results from fellow developers wrestling with the same frustrating experience.

If you’re in that boat, fear no more! We’re going to get your footers in shape in a snap. Here’s a diagram of the problem:

Header

Unfortunately, many people try to handle it by setting a fixed height to the content, pushing the footer down. This may work when you view it, but there are several different browser window heights, resolutions, and variables that make this an extremely unreliable solution (notice the emphasis on the word “extremely”—this basically means “don’t do it”). We need a dynamic solution that’s able to adapt on the fly to the height of a user’s browser window, no matter if you resize it, have Firebug open, use a unique resolution, or just have a really, really weird browser!

Let’s take a look at what the end results should look like:

Header

To make this happen, let’s get our HTML structure in place first:

<html>
  <div id="page">
    <div id="header"> Header </div>
    <div id="main">
      Top of body <br>
      Main body <br> Main body <br> Main body <br>
      Main body <br> Main body <br> Main body <br>
      Main body <br> Main body <br> Main body <br>
      Main body <br>
      Bottom of body <br>
    </div>
  </div>  <!-- /page -->
  <div id="footer"> Footer </div>
</html>

It’s pretty simple so far. Just a skeleton of a web page. The "page" div contains all of the pieces of our HTML page – except the footer. The "header" div is going to be our top content. The "main" div will include all our content for the page. The "footer" div is our copyrights and footer links. Let’s start by coding the CSS for the full page:

<style>

    html, body {

      margin : 0px ;

      height : 100% ;

      width : 100% ;

    }

    #header, #footer {

      height : 40px ;

      text-align : center ;

      width : 100% ;

    }

    #header {

      background-color : pink ;

    }

    #footer {

      background-color :  #82e0aa ;

    }

  </style>

Nothing too special here. We start by making the HTML page itself the full width and height of the window. We then have our header and footer be a fixed height (40px), center the text in each and make them the full width of the page. We then finally set two different colors for each – pink for the header and a shade of green for the footer.

The resulting page should look something like this:

The resulting page

Notice that the footer isn’t at the bottom of the page yet – the above image shows that when the window is larger than what the page needs there’s a lot of blank space under the footer. Also, if we were to shrink the window, vertically, then the footer would scroll off the bottom of the page. We can fix this by making two changes, first add these css rules to the “#footer” css section:

position : fixed ;
bottom : 0px ;

The first rule “position: fixed” tells the browser that the “footer” should be position at a static/fixed location on the page. The second rule “bottom: 0px” tells it that we want the bottom of the “footer” to be zero pixels from the bottom of the window – in other words, always at the bottom of the window.

Second, add new new “#page” css section:

#page {
      padding-bottom : 40px ;
}

This section will tell the browser that the “page” div should have 40 pixels of extra space at the bottom. This is critical. It’s 40px because that’s the height we assigned to our footer, which means that none of the text in the “main” div will be hidden by the “footer” div.

And that’s it. When we look at the result we’ll see that when the window is too small and we need a scroll bar it should appear like this:

Header

And when the window is larger than what we need, it should look like this:

Header

Notice that in both cases the footer remains fixed to the bottom of the window.

One of the best things about this little trick is that it’s compliant with all major browsers—including Firefox, Chrome, Safari, and Internet Explorer

We can’t finish this blog without mentioning our favorite perk of this trick: Should you not have a specially-designed mobile version of your site, this trick even works on smart phones!

Sign up for IBM Cloud. It’s free!

Be the first to hear about news, product updates, and innovation from IBM Cloud