Авторство данного метода принадлежит Кэмерону Адамсу (Cameron Adams). Благодаря приведенной технике вы можете прижать ваш подвал к низу страницу при малом размере контента и сохранить нормальное положение вещей, когда контент требует вертикальной прокрутки.

<div id="header-content">
    <div id="header">
        Шапка сайта
    </div>
    <div id="content">
        Основная контентная часть
    </div>
</div>
<div id="footer">
    Подвал
</div>

Обратите внимание, что вся разметка макета, кроме подвала, должна быть заключена в контейнер, в данном случае div#header-content.

style.css:

html,
body {
    height:100%; /* Растягиваем документ на всю высоту окна */
    }
#header-content {
    position:relative;
    min-height:100%; /* Минимальная высота основной части макета */
    }
#content {
    padding-bottom:3em; /* Пространство необходимое, чтобы подвал не залезал на основную часть при большом количестве контента */
    }
#footer {
    position:relative;
    height:3em; /* Высота подвала, указывать необязательно, но полезно при разработке */
    margin:-3em 0 0; /* Поднимаем футер наверх */
    }

ie.css:

* HTML #header-content {
    height:100%; /* Эмулируем min-height для IE <7 */
    }

Материалы для изучения:

• footerStickAlt: A more robust method of positioning a footer
• footerStick