Как зафиксировать футер внизу страницы в любом браузере

Быстрый ответ

Если вы хотите чтобы подвал всегда оставался в нижней части страницы, примените Flexbox. Назначьте основному контейнеру стили display: flex;, flex-direction: column; и min-height: 100vh;, благодаря чему он заполнит весь экран. Для главного содержимого страницы примените flex: 1; – это позволит ему занять все оставшееся пространство и подвал будет закреплён в нижней части.

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  flex-shrink: 0;
}

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

Глубокое погружение в Flexbox

Цель Flexbox

Flexbox служит для эффективного распределения пространства и выравнивания элементов в контейнере. С его помощью расположение подвала на странице становится простым и удобным.

Предсказуемый размер подвала

Работать с подвалом будет проще, если его размеры известны. Это упрощает управление макетом и помогает избежать проблем со скрытием элементов, расположенных выше подвала.

Кроссбраузерность

Flexbox отлично поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari и Edge. Однако не забывайте проверять совместимость c устаревшими вресиями браузеров и мобильными устройствами.

Отзывчивость: использование единиц viewport и отрицательных отступов

При помощи единиц vh, вы сможете адаптировать подвал к различным размерам viewport. Отрицательные отступы помогут выровнять пространство внутри контейнера без использования calc.

Визуализация

Вот простая визуализация ситуации и ее решения:

• Страница – это стакан воды.
• Подвал – вишенка на дне.

Стакан с водой:
🥛🔺🔺🔺
🥛🔺🔺🔺 (Контент)
🥛🔺🔺🔺    
🥛🍒       (Подвал)

При разбросе контента:
🥛🔺🔺🔺🔺🔺🔺
🥛                   
🥛   <-- Контент разлетелся!
🥛🍒

Для закрепления подвала внизу, как вишенка на дне стакана:

• Установите display: flex; и flex-direction: column; для body или основного контейнера.
• Примените margin-top: auto; для подвала.

Теперь подвал всегда будет располагаться внизу страницы, вне зависимости от объема контента.

Другие методы для закрепления подвала

Абсолютное позиционирование

Вы можете использовать проверенный временем position: absolute;, но убедитесь, что вы знаете точные размеры подвала, и он не будет перекрывать содержимое.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Метод "push"

Применялся ранее, метод с дополнительным элементом div помогает поддерживать подвал внизу страницы. Очень эффективен, когда контент незначителен.

.push {
  height: 50px;
}

Работа с устаревшими браузерами

Если нет поддержки flexbox, можно использовать JavaScript для корректировки положения подвала:

$(document).ready(function() {
  var $footer = $('.footer');
  if ($(document).height() <= $(window).height()) {
    $footer.css({ position: "absolute", top: $(document).height() – $footer.height() });
  }
});

Борьба с обычными проблемами

Переполнение контейнеров

Советуем использовать min-height вместо height для контейнера, чтобы легко управлять проблемой переполнения контента.

Адаптивность подвала

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

Тестирование в разных браузерах

Не забывайте тестировать внешний вид страницы в различных браузерах с использованием инструментов разработчика.

Полезные материалы

1. Sticky Footer, Five Ways | CSS-Tricks — Пять вариантов создания фиксированного подвала.
2. A Complete Guide to Flexbox | CSS-Tricks — Полное руководство по Flexbox.
3. Flexbox | Codrops — Детальный справочник по Flexbox.
4. Understanding Flexbox: Everything you need to know — Статья для глубокого понимания Flexbox.
5. Sticky Footer with Bootstrap 4 – Stack Overflow Discussion — Обсуждение реализации статичного подвала в Bootstrap 4.