18 August 2009

«Прибитый» к низу футер без заморочек

Lumber room
Доброго времени суток, Хабраюзеры.
Ввиду непонятного назначения сего топика — CSS Sticky Footer / Прилипающий футер и того, что моя не является зарегистрированным юзером Хабрахабра, предлагаю свой вариант.

Вариант стар и испробован сотнями проектов, но для начала опишу минус вышеупомянутого способа:
— если Вам нужен попап или много попапов (в неаяксовых вариантах) внутри #main, то разделив #main и #footer глобальным z-index-ированием (для ИЕ6) Ваши попапы будут залезать под Ваш футер, т.к. хотя бы для ФФ, но z-index у #footer надо будет указывать больше, чем у #main.

И так, метод:

<div class="page">

<div class="header">
</div>

<div class="content">
</div>

<div class="footer">
</div>

</div>

Также прилагается стилевая часть шаблона:

.page { width: 100%; min-width: 996px; min-height: 100%; position: relative; z-index: 1; }
.header { width: 100%; height: 150px; position: relative; z-index: 3; }
.content { width: 100%; padding-bottom: 50px; position: relative; z-index: 2; }
.footer { width: 100%; height: 50px; left: 0; right: 0; bottom: 0; position: absolute; z-index: 4; }

Для ИЕ6 думаю стили всем известны, но всё же опишу то, что использую лично я, то, что испытанное несколькими сотнями проектов и то, что ни разу не подвело даже в самых непростых дизайнах:

* html .page { height: 100%; width: expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 996 ? "996px" : "auto") : (document.body.clientWidth < 996 ? "996px" : "auto")); }

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

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

Плюсы:
  • один expression для ИЕ6 на ширину
  • нет лишних, ненужных блоков

Минусы:
  • фиксированная высота


P.S. Не ругайте за форматирование, я обязательно сделаю во втором посте всё красиво.

UPD: Пример

Сейчас писать отдельный пример нет времени. Просто сегодня только прислали приглашение.
Tags:каскадные таблицы стилей
Hubs: Lumber room
+7
956 31
Comments 58
Разработчик Python
from 100,000 ₽RYDLABЕкатеринбург
Разработчик Python
from 100,000 ₽RYDLABЕкатеринбург
Senior Android Developer
from 3,000 €Pure AppRemote job
Дизайнер-разработчик UХ/UI
from 100,000 to 200,000 ₽FEOFINANCEМосква
Angular Front-end Developer
from 120,000 to 140,000 ₽ItransitionСанкт-ПетербургRemote job
Top of the last 24 hours