Как это все работает?

Я для удобства разделил листинги кода на CSS- и HTML- код, чтобы проще было вникнуть во всю суть.

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  position: relative;
}
#container {
  min-height: 100%;
}
#main {
  padding-bottom: 80px;     /* высота футера */
}
#footer {
  background: gray;
  height: 80px;             /* высота футера */
  margin-top: -80px;        /* отрицательный margin,
                               равный высоте футера  */
  position: relative;
}

HTML

Этот код является скелетом нашего интерфейса:

<div id="container">
  <div id="main">
    Информационная часть сайта
  </div>
</div>
<div id="footer">
  Прижатый к низу футер
</div>

Вроде, на мой взгляд, такой способ прижатия футера к низу страницы один из самых элегантных и простых способов, которые мне когда-либо приходилось видеть.