Заказать вёрстку
  • verstka.pro

Прижатый к низу футер

Есть множество методов, с помощью которых можно прижать футер к низу. Но многие из них имеют недостатки. Поэтому здесь я опишу только те, которые подчиняются следующим условиям:

  • отсутствие JavaScript
  • блочная вёрстка (без таблиц)
  • кроссбраузерность и валидность

Ниже я опишу два метода, которые нам подойдут.

Подвал с отрицательным margin-top

See the Pen Прижатый футер (margin-top) by Alexander (@CSR) on CodePen.

Обязательное условие метода: HTML-код футера необходимо расположить прямо в теге body, сразу после обёртки, которая содержит контент.

Это мой любимый метод, так как подвал остаётся в потоке.

Подвал с position: absolute

Как видите, этот метод очень похож на предыдущий. Отличие в том, что подвал необходимо расположить внутри основной обёртки. А сама обёртка должна иметь position: relative.

Резюме

Итак, мы рассмотрели самые популярные методы фиксации подвала. В них много общего, и какой бы метод вы не избрали, всегда помните про ограничения:

  • элементам html и body должна быть установлена 100% высота
  • обёртке должна быть установлена минимальная высота, равная 100%
  • подвал должен быть фиксированной высоты
  • блок, содержащий контент, должен иметь нижний отступ не меньше, чем высота подвала

Последний пункт необходим для того, чтобы часть контента (когда его будет много) не залезла под подвал.

Нет времени разбираться? Закажите вёрстку сайта у меня =)