Fixed Position Footers

Posting mostly for my own reference…

One thing I find that I need to do a lot is position a footer bar across the bottom of the page. The most common way to do this is to set a fixed position on the element and anchor it to the bottom using this css:

 #footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      height: 75px;
 }

Unfortunately, this doesnt work quite right in IE. When using this style definition in IE, the footer gets locked into a specific position in the viewport and when you resize from the corner anchor the footer does not move with the window.

The proper cross-browser way to declare a fixed position footer is to use negative margins, like this:

 #footer {
      width: 100%;
      position: fixed;
      top: 100%;
      margin-top: -75px;
      height: 75px;
 }

This appears to function properly in every browser I’ve looked at so far.

Follow @mattberther on Twitter