Not to be confused with stinky feet, sticky footers are a CSS technique whereby a page footer always appears at the bottom of the page/window, even if the content of the page isn’t tall enough to fill the window completely. (For you HTML-phobes out there, normally all of the content on a web page flows vertically one element after another, meaning that your page “footer” can potentially end up in the middle of the window, with a bunch of blank space below it, if your page content is too short. Not to be confused with Too Short.)

I have seen sites whose owners had solved this problem, but as it’s never really been an issue for me (since I never have too little content to fill a page, I guess!), I haven’t bothered to dig into the solution, until today, when I needed to for work.

The Man in Blue (also known as Australian author and self-identified “web technologist” Cameron Adams), has posted an elegant solution, which has also been floating around in various forums.

It goes something like this… season to taste:

html {
  height: 100%;
}
body {
  height: 100%;
}
#nonFooter {
  position: relative;
  min-height: 100%;
}
* html #nonFooter {
  height: 100%;
}
#footer {
  position: relative;
  margin: -7.5em auto 0 auto;
}
/* A CSS hack that only applies to IE — specifies a different height for the footer */
* html #footer {
  margin-top: -7.4em;
}