Создаем фиксированный футер в Bootstrap: лучший подход

Быстрое решение

Для фиксации футера в нижней части экрана к тегу <footer> следует применить класс .fixed-bottom:

<footer class="fixed-bottom">
  <!-- Ваш надежный спутник 🐶 -->
</footer>

Не забывайте подключать Bootstrap CSS к своему проекту, и футер будет оставаться на своем месте при прокрутке страницы.

В чем суть фиксированного позиционирования?

CSS-свойство position: fixed; удаляет элемент из общего потока и прикрепляет его к области просмотра. Это как если бы чайка села на корабль и не реагировала на движение волн: страница прокручивается, а элемент остается на месте. Так создается стойкий элемент интерфейса.

Эффективное управление содержимым

Следует настроить оставшийся контент так, чтобы он не скрывался за футером. В этом поможет следующий CSS-код:

main {
  /* Соблюдаем расстояние, чтобы футер не спрятал содержимое 👟 */
  min-height: calc(100vh – [Высота_вашего_футера]px);
  padding-bottom: [Высота_вашего_футера]px;
}

Таким образом, мы как бы "приручаем" футер, чтобы он не мог непредвиденно перемещаться по странице, аналогично тому, как будто у вас шаловливый щенок.

Гармонизация с адаптивным дизайном

При работе с адаптивностью футер должен сохранять свое положение на различных устройствах. Использование единиц измерения, основанных на размерах вьюпорта, таких как vh, обеспечивает футеру стабильность независимо от размера экрана. В Bootstrap класс fixed-bottom уже содержит эту гибкость, что отнимает у вас заботу ручной настройки.

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

Ваш футер будет стойким, независимо от того, создаете ли вы короткую запись или обширный текст:

Длина содержимого 📏: Краткое 📰 против Объемного 🗞️

Краткое 📰:
____________________
|                  |
|     Содержимое   |
|__________________|
| 🚗 Фикс. Футер   |
|__________________|

Объемное 🗞️:
_____________________
|                   |
| Очень объемное     |
| Продолжение текста |
|...                |
|... Еще контент ...|
|___________________|
| 🚗 Фикс. Футер   |
|___________________|

Футер ведет себя как защитные борта на корабле, всегда готов закончить композицию вашей страницы.

Взаимодействие с z-index

Иногда вам придется работать с рядом элементов, у которых разные значения z-index. Чтобы избежать конфликтов, назначьте футеру z-index:

.fixed-bottom {
  /* Как вежливый англичанин, который ожидает своей очереди 🇬🇧 */
  z-index: 1030; /* Настройте в соответствии с вашими потребностями */
}

Указав соответствующий z-index, футер будет сохранять свою позицию поверх большинства элементов, но будет достаточно вежлив, чтобы уступить дорогу таким элементам, как модальные окна или выпадающие списки.

Кроссбраузерность: проверено!

При использовании фиксированных элементов важно удостовериться в их совместимости с разными браузерами. Классы Bootstrap были разработаны так, чтобы упростить этот процесс, будучи совместимыми с современными версиями браузеров, включая Chrome, Firefox, Safari, Edge, и даже с последними версиями IE.

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

1. Sticky Footer Template · Bootstrap v5.1 — Официальное руководство от Bootstrap по созданию фиксированного футера.
2. A Complete Guide to Flexbox | CSS-Tricks — Обширное руководство по Flexbox, идеально подходящее для стилизации футера.
3. position – CSS: Cascading Style Sheets | MDN — Подробная информация о свойстве position в CSS, которое является ключевым для фиксации футера.
4. css – Flushing footer to bottom of the page, twitter bootstrap – Stack Overflow — Обсуждения и решения на Stack Overflow о том, как закрепить футер в нижней части страницы с использованием Bootstrap.
5. How To Create a Fixed Footer — Практическое руководство по созданию фиксированного футера без использования Bootstrap.