Sticky footer

hatifnatt — Tue, 29 Jan 2008 13:48:40 +0000

При верстке часто возникает необходимость «приклеить» какой-то блок к нижней части рабочей области броузера. Если использовать таблицы (что вобщем-то в корне не верно) то расположение элементов в нижней части страницы не вызывает никаких проблем. А вот при правильной верстке блоками, это может вызвать определенные трудности, т.к. объектные модели броузеров как известно не совсем соответствуют стандартам и некоторые броузеры не поддерживают свойства позволяющие реализовать такое «приклеивание» предназначенными для этого методами. В итоге приходится использовать хаки, которые во первых должны опять же быть кроссбраузерными, а во вторых не развалиться с выходом новых версий лучше поддерживающих стандарты.

Решение как оказалось есть. Достаточно простое, хотя и связанное с небольшими заморочками.

Способ №1 by The Man In Blue основанный на footerStick от solarDreamStudio's

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

Hatifnatt's blog » css

Sticky footer