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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  margin-top: auto;
}
HTML
Скопировать код
<div class="wrapper">
  <main class="content">
    <!-- Разместите ваши уникальные данные здесь -->
  </main>
  <footer class="footer">
    <!-- А подвал спокойно расположен внизу -->
  </footer>
</div>

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS
Скопировать код
.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 различными браузерами.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод рекомендуется для привязки футера к низу страницы?
1 / 5