Sticky Footer или прибиваем футер к низу

30.01.09 дизайн, css

Принцип следующий.

1. html и body - высота 100%.
2. Оборачиващий блок (в нашем случае #page) - минимальная высота 100%, нижний отступ 100px = высоте футера
3. Высота футера фиксированная и равна 100px

Разметка

<div id="page">

        <div id="main" class="clearfix">
                ...
        </div>

</div>

<div id="footer">
        ...
</div>

CSS

body {padding:0;margin:0;}
html, body {height: 100%;}
#page {min-height:100%;height:auto !important;height:100%;}
#main {padding-bottom: 100px;}  /* отступ = высоте футера */
#footer {position: relative;margin-top: -100px; height: 100px;clear:both;overflow:hidden;} /* отрицательная граница = высоте футера */

Задаем 100%-ю высоту страницы. #page имеет нижний отступ, равный высоте футера. Сразу после #page ставим футер и поднимаем его вверх, указывая отрицательную границу margin-top: -100px;, высоту в 100px и релативное положение.

Вертикальную прокрутку фиксим отступом в 1px. Как «очистить» плавающие блоки — дело вкуса, я ставлю нулевую невидимую точку и для IE включаю HasLayout через zoom:1

Проверено в IE6, IE7, IE8, FF2, FF3 (Mac/Win), Opera 9.xx (Mac/Win), Safari (Mac), Chrome.

Есть конечно один существенный недостаток такого метода, это фиксированная высота футера.

То, что получилось в итоге.

Комментарии

1. Если вынести основной css во внешнюю таблицу, то в IE6 способ не работает.

   
   — Роман    Feb 21, 07:56 PM    #

← предыдущая следующая →

В архив