Sticky Footer — Прилипающий футер

Есть несколько способов реализовать футер, прилипающий к низу страницы (Sticky Footer), используя свойства CSS. Но многие из них прибегают к громоздким и неудобным хакам, или требуют много дополнительного HTML кода. Описанный здесь метод использует всего 15 строк CCS кода и почти не требует дополнительной HTML разметки. Также он отличается тем, что построен на валидном CSS коде. И, само собой, работает во всех популярных браузерах (IE5 и старше, FireFox, Safari, Opera и Chrome).

Прежде всего, вы можете посмотреть, как это работает. Здесь находится пример реализации описанного метода. Убедитесь в том, что он валиден и является кроссбраузерным.

Добавьте следующий CSS код в вашу таблицу стаилей. При этом обратите внимание, что отрицательное значение margin-bottom равно высоте .footer и .push. Это отрицательное значение должно быть равно полной высоте footer, включая какие-либо отступы или border последнего. Если не следовать этому принципу, то появится вертикальная полоса прокрутки. Она появится даже в том случае, если фактически контент будет помещаться на странице.

CSS код:

12345678910111213141516

* {margin: 0;}html, body {height: 100%;}.wrapper {min-height: 100%;height: auto !important;height: 100%;margin-bottom: -80px; /* Отрицательное значение высоты footer'а */}.footer, .push {height: 80px; /* .push и .footer должны быть одинаковой высоты */clear: both;}

HTML код представлен ниже. Весь контент должен содержаться только внутри.wrapper и .footer. Внутри .push также ничего не должно быть, так как этот слой является скрытым элементом, прижимающим футер. Разумеется, все это не касаетс я элементов с абсолютным позиционированием. Они могут находиться где-угодно.

HTML код

123456789101112

<div class="wrapper"><div class="header">Header block</div> <p>Main content</p><div class="push"></div></div> <div class="footer"><p>Footer</p></div>

Учитывая то, что под IE6 верстают все меньше, можно привести селектор .wrapper к такому виду:

1234

.wrapper {min-height: 100%;margin-bottom: -80px; /* Отрицательное значение высоты footer'а */}

Метод останется рабочим для всех браузеров, кроме IE6 и меньше. Конечно, две строчки кода погоды не делают, но для педантов они могут показаться лишними.

Посмотреть пример

На основе статьи CSS Sticky Footer

Добавить комментарий