Прижатый футер

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

Существует несколько способов прижать подвал:

  • абсолютное позиционирование
  • минимальная высота контента равная высоте экрана минус высота футера
  • табличная верстка
  • css flex
  • css grid

Рассмотрим два последних варианта, как наиболее актуальные.

В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

css flex

Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу.

css grid

Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё.