Sticky Footer

From Zanecorpwiki

I love the sticky footer. The footer "sticks" to the bottom of the screen, so when content is less than the viewing area there's a space between content and the footer. When the content is larger, however, the footer snugs up against the content.

Achieving the sticky footer effect as relatively straightforward. In most cases, it requires adding a single element and a handful of CSS rules. The new element is the "non-footer" element which should surround everything but the footer, leading to something like:

<div id="nonFooter">
<div id="content">...</div>
</div><!-- #nonFooter">
<div id="footer"">...</div>

And the CSS:

First, reset the padding and margin so we control it:

* { padding: 0; margin: 0; }

Then sticky footer proper:

/* the first selector is an IE fix. The HTML and BODY should entirely fill the view */
* html #nonFooter, html, body { height: 100%; }

/* the non-footer needs to take up as much space as it needs... the actual declaration
 * may make you think that the non-footer will take up more space than that, but this
 * is what works */
#nonFooter {
  position: relative;
  min-height: 100%;
}

/* the content bottom margin only comes into play when the footer snugs against the
 *  content, in which case we need to make room for the footer by offsetting the
 *  content from the bottom edge of the container */
#content { padding-bottom: 50px; }
/* in theory, you may be able to use margin, but in practice that breaks on Webkit
 * browsers (Chrome 2011-03-23) */

/* the footer is then offset from the bottom and pulled over the non-footer by the
 * height of the footer. Notice that padding is not included in height, so if you
 * declare a specific height (which isn't always necessary), take that into account
 * ... also height is different in IE, so you'll need IE specific rules too */
#footer {
  position: relative;
  margin-top: -50px;
  /* height: 30px; */ /* allow 20px for top bottom padding */
}

Inspired by The Man in Blue.