При верстке часто возникает необходимость «приклеить» какой-то блок к нижней части рабочей области броузера. Если использовать таблицы (что вобщем-то в корне не верно) то расположение элементов в нижней части страницы не вызывает никаких проблем. А вот при правильной верстке блоками, это может вызвать определенные трудности, т.к. объектные модели броузеров как известно не совсем соответствуют стандартам и некоторые броузеры не поддерживают свойства позволяющие реализовать такое «приклеивание» предназначенными для этого методами. В итоге приходится использовать хаки, которые во первых должны опять же быть кроссбраузерными, а во вторых не развалиться с выходом новых версий лучше поддерживающих стандарты.
Решение как оказалось есть. Достаточно простое, хотя и связанное с небольшими заморочками.
Способ №1 by The Man In Blue основанный на footerStick от solarDreamStudio's
HTML код:
<html>
<body>
<div id="nonFooter">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
html { height: 100%; }
body { height: 100%; }
#nonFooter {
position: relative;
min-height: 100%;
}
* html #nonFooter {
height: 100%;
}
#content {
padding-bottom: 9em;
}
#footer {
position: relative;
margin-top: -7.5em;
}
Стоит отметить что padding-bottom у #content должен быть больше или равен margin-top у #footer, а если вы будете добавлять вложенный в #footer блок, то стоит задать ему свойство position: static иначе он может вести себя не совсем так как ожидается, но естественно это не обязательное условие, просто стоит обратить на это внимание, т.к. я потратил примерно пол часа пока понял почему блок вложенный в #footer не хочет центроваться, а упорно равняется по левому краю.
Примеры можно найти тут, все работает корректно в FF 2.0.*+ в Opera 9.*+ и в IE6+
Или как альтернатива «Длинный» контент «Короткий» контент
Способ №2 представлен Ryan Fait
Соответственно можно ознакомиться с HTML кодом и с CSS кодом
аналогично первому способу (это кстати помечено в комментариях к css) нижний отступ у .wrapper должен быть равен высоте у .footer и у .push
Данный метод так же корректно обрабатывается FF 2.0.*+ в Opera 9.*+ и в IE6+
Обсуждение sticky footer-а на Digg
>Если использовать таблицы (что вобщем-то в корне
>не верно) то расположение элементов в нижней
>части страницы не вызывает никаких проблем.
Ну это как сказать, при DTD XHTML 1.0 Transitional
таблицами не получается :)
Спасибо за хороший HOWTO! Продолжай в том же духе!