Прижимаем footer вниз
Прижимание футера (подвала) страницы к низу экрана — достаточно распространенная задача. Что под этим понимается?
- Если контент страницы меньше высоты экрана, то футер должен быть прижат к низу экрана. При этом не должны быть вертикальные полосы прокрутки
- Если контент страницы больше высоты экрана, то футер должен следовать сразу после контента
Естественно, всё это должно работать во всех браузерах. Также стоит отметить, что рассматривается метод для случая когда футер имеет фиксированную высоту.
Построение
Для простоты рассмотрим страницу из двух блоков: основной блок и подвал. Начнем с того, что основному блоку зададим минимальную высоту в 100%. Это чтобы он растягивался всегда до размера окна и не позволял футеру подниматься выше. Футер же, в свою очередь, зафиксируем по высоте. Допустим 100px. Кроме того, для всей страницы необходимо задать высоту на 100%. Укажем это в стилях для body и html. Получаем следующее:
CSS
1 2 3 4 5 6 7 8 9 | html, body { height: 100%; } div.main { min-height: 100%; } div.footer { height: 100px; } |
HTML
1 2 3 4 5 6 | <div class=“main”> Это основной блок </div> <div class=“footer”> Это футер </div> |
Посмотрите пример. В примере добавил дополнительные стили для легкого визуального восприятия.
Обращаем внимание, что футер выходит за пределы экрана. Причем на величину равную его высоте. Чтобы футер «вернуть в экран» зададим ему отрицательный margin сверху равным его высоте.
CSS
1 2 3 4 | div.footer { height: 100px; margin-top: -100px; } |
Смотрим. Полученное уже похоже на то, что нам нужно.
Но, естественно предположить, что когда контента будет много, внизу футер накроет часть основного блока. Этого можно избежать если заведомо внизу основного блока не будет ничего выводиться. Можно вставить туда пустой блок высотой в 100px (т.е. высота футера). Однако я противник использования пустых блоков для формирования отступов. Зачем это делать если в css можно задать отступ. Но здесь можно ошибиться — нижний отступ для основного блока нельзя указывать. Ибо его результирующая высота получится height + padding-bottom. А это 100% + 100px. Не трудно догадаться что основной блок не влезет в экран. Выходом является использование вложенного блока, которому уже можно задать нижний отступ. Желательно взять с запасом, чтобы контент не теснился с футером вплотную.
Пишем:
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | html, body { height: 100%; } div.main { min-height: 100%; } div.main div.container { padding-bottom:110px; } div.footer { height: 100px; margin-top: -100px; } |
HTML
1 2 3 4 5 6 7 8 | <div class=“main”> <div class=“container”> Это основной блок </div> </div> <div class=“footer”> Это футер </div> |
Смотрим.
Теперь при большом контенте, футер не будет накрывать основной блок.
Вот и всё! Хотя нет, вру. Ведь у нас есть IE6, а мы используем min-height. Однако это решается например при помощи !important. Тогда окончательный стиль для основного блока принимает вид:
CSS
1 2 3 4 5 | div.main { height: auto!important; height: 100%; min-height: 100%; } |
