Как прижать футер к низу страницы

Сергей Асанов Сергей Асанов

Бывает, что на страницах с небольшим количеством информации, «подвал» сайта некрасиво зависает в середине экрана. В таких случаях, необходимо прижимать футер к нижней границе браузера. Я достаточно давно использую один из самых простых и распространённых способов реализации этой идеи.

Суть метода заключается в следующем. На странице создаётся блок container, который мы растягиваем на всю высоту экрана. А футер, за счёт отрицательного отступа, поднимаем вверх. В блоке с самим содержимым страницы content, оставляем снизу высоту, равную высоте футера, чтобы они не наезжали друг на друга. Вот и всё.

Стоит заметить, что поскольку IE6 не знает, что такое min-height, то для него приходится использовать хак. Все браузеры применят height:auto, а IE6, не умеющий обрабатывать !important, применит последнее значение height: 100%.

Основные плюсы данного способа:
— работает во всех браузерах;
— не зависит от количества текста на странице (меньше высоты экрана или больше).

Как прижать футер к низу страницы

HTML:

<body>
    <div id="container">
        <div id="content">Содержимое страницы</div>
    </div>
    <div id="footer">Подвал</div>
</body>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#content {
   padding-bottom: 120px;
}
#footer {
    height: 120px;
    margin-top: -120px;
}

Смотреть пример