Доброго времени суток, Хабраюзеры.
Ввиду непонятного назначения сего топика —
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: Пример
Сейчас писать отдельный пример нет времени. Просто сегодня только прислали приглашение.
