Sticky footer — позиционирование «подвала» страницы

Мне несколько раз приходилось верстать страницы, которые требуют, чтобы футер был помещен у нижней границы окна браузера, если содержимого не много, или в самом низу страницы, если размеры содержимого страницы больше размеров окна.

Достаточно давно в одном из блогов был описан стабильный метод для решения этой задачи, не потерявший актуальности и по сей день.


html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;
}
* html #wrapper {
    height: 100%;
}
#content {
    padding-bottom: 120px;
}
#footer {
    position: relative;
    margin: -100px auto 0 auto;
}

Макет страницы:


<html>
    <body>
        <div id="wrapper">
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>

Ключевым правилом, позиционирующим футер, является отрицательное значение margin-top . Когда контента мало, он естетсвенным образом, прикрепляется к нижней границе окна из-за действия height: 100% у тегов html и body . В случае, когда размер контента превышает размер окна, футер оказывается поверх блока-обертки, но padding-bottom заранее резервирует место для него.

Единственный недостаток решения состоит в том, что вы должны знать точную высоту футера.