Привязка футера к низу страницы CSS: варианты без фиксирования

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

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

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  margin-top: auto;
}

<div class="wrapper">
  <main class="content">
    <!-- Разместите ваши уникальные данные здесь -->
  </main>
  <footer class="footer">
    <!-- А подвал спокойно расположен внизу -->
  </footer>
</div>

Итак, даже присутствие содержимого не обязательно: подвал всегда будет на своём месте.

"Прилипающий" подвал для современных экранов

Согласованность и надёжность в браузерах

Flexbox поддерживается современными браузерами, гарантируя надёжное позиционирование подвала внизу страницы. Да, можно использовать position: fixed;, но будьте готовы к возможному перекрытию содержимого на экранах различных размеров.

Гибкое пространство для содержимого

Если размер содержимого на вашей странице динамически изменяется, добавление flex: 1; к div с классом .content поможет адекватно приспособиться к изменениям и удерживать подвал на его месте.

Заполнение полной высоты видимой области экрана

Класс .wrapper с min-height: 100vh; гарантирует занятие всего вертикального пространства, что хорошо удерживает подвал внизу, вне зависимости от объёма содержимого.

Учёт размера динамического подвала

Иногда подвалу требуется больше места, особенно когда содержимое меняется. В таком случае используйте calc(), назначая минимальную высоту области содержимого:

.content {
  min-height: calc(100vh – 100px); /* Вычитаем 100 пикселей, высоту подвала */
}

Соответствие адаптивному дизайну

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

Несколько оберток и сложные макеты

С увеличением сложности вашего сайта убедитесь, что основной .wrapper с flex-свойствами включает все необходимые области для достаточной гибкости в растягивании и сжатии.

Преимущества разбиения

Разделение стилей на CSS-классы или переменные делает ваш код более читабельным и помогает соблюдать принцип DRY (Don't Repeat Yourself – "Не повторяйся").

Flex-grow для сложного макета

Если непосредственно вложенные элементы в flex-контейнер не оптимальны, воспользуйтесь свойством flex-grow: 1 для продвижения подвала вниз:

<div class="util-flex-grow"></div> <!-- Я подскажу подвалу оставаться внизу при скромном содержимом -->

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

Визуализируйте веб-страницу как структуру: верхнюю часть (заголовок), среднюю часть (содержимое) и нижнюю часть (подвал). Подвал всегда находится внизу, подобно фундаменту здания.

| Голова (Заголовок) |
| ------------------ |
| Содержимое (Жилая зона) |
| ------------------ |
| Подвал (Фундамент) |

Та же структура, но с использованием эмодзи:

| 🏠:  "Крыша" (Заголовок) всегда на верху.               |
| 🪑:  "Жилая зона" (Содержимое) гибко приспосабливается. |
| 🧱:  "Фундамент" (Подвал) удерживается внизу CSS.      |

Таким образом, независимо от объема содержимого, подвал всегда остаётся внизу, достойно действуя как фундамент.

Адаптивный дизайн и примечания

Динамическое регулирование содержимого

Свойство flex-grow: 1 позволит содержимому занимать доступное место и удерживать подвал внизу.

Динамический расчёт размеров

Используйте функцию calc() для умной настройки min-height, учитывая высоту подвала.

Поддержка в различных браузерах

Проверьте совместимость с браузерами, поскольку flexbox поддерживается всеми современными браузерами.

Адаптация к разнообразным макетам

Flexbox прекрасно подходит для создания различных адаптивных макетов.

Обработка переполнения содержимого

Используйте overflow: auto; в разделе содержимого, чтобы предотвратить перекрытие:

.content {
  overflow: auto; /* Добавим полосы прокрутки для удобства просмотра */
}

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

1. Sticky Footer, Five Ways | CSS-Tricks – анализ различных методов создания липкого подвала.
2. Основные концепции Flexbox – CSS: Cascading Style Sheets | MDN – фундаментальное руководство по flexbox-макетам.
3. css – Прижимаем подвал внизу страницы, twitter bootstrap – Stack Overflow – обсуждения решения задачи позиционирования подвала с использованием Bootstrap.
4. CSS Flexbox (Гибкая коробка) – обучающий материал, демонстрирующий применение flexbox.
5. CSS Макет – Свойство position – обучающий курс по позиционированию в CSS.
6. Can I use... Поддержка таблиц для HTML5, CSS3 и т.д. – проверка поддержки flexbox различными браузерами.