Получить профессию в Skypro
Создание адаптивного футера в Bootstrap 3: на дно контента
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Модель Flexbox предоставляет изящное решение для фиксации подвала страницы у нижнего края без применения position: fixed. Суть метода заключается в том, что для тега <body> задается свойство display: flex и flex-direction: column, а для основного содержимого сайта — flex-grow: 1. Это позволяет контенту занимать всё доступное пространство, тем самым притягивая подвал к нижнему краю экрана.
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<main style="flex-grow: 1;">
<!-- Здесь основное содержимое страницы -->
</main>
<footer>
<!-- Здесь содержимое подвала -->
</footer>
</body>
Детальная стратегия для для подвалов без фиксации
Настройка внешнего отступа body с учетом высоты подвала
Если применение абсолютной позиции предпочтительнее, важно установить для элемента, в котором располагается контент, нижний внешний отступ (margin-bottom), соответствующий высоте подвала.
#wrapper {
margin-bottom: -50px; /* Соответствует высоте подвала */
}
footer {
position: absolute;
bottom: 0;
height: 50px; /* Точная высота подвала */
}Максимальная адаптивность с помощью контейнеров Flexbox
Если на вашей странице присутствует излишек информации, то контейнеры Flexbox станут лучшей опцией. Установив для контейнера свойство display: flex, мы гарантируем, что тот будет корректно отображать содержимое, независимо от его объема.
.container {
display: flex;
flex-wrap: wrap;
}Flex контейнеры придадут подвалу адаптивность, позволив ему гибко подстраиваться под изменения в содержимом.
Динамическое управление высотой подвала
Профессиональный совет: используйте min-height с единицами vh, чтобы подвал гармонично соответствовал даже небольшому объему контента.
footer {
min-height: 10vh; /* Подберите значение на своё усмотрение */
}Таким образом, веб-страница выглядит сбалансированно: подвал эстетично заполняет пространство, выглядит уместно и не создает впечатление избыточного размера.
Визуализация
Продумайте свою веб-страницу как прозрачный сосуд с водой, где подвал — это камушек на дне:
|📄 Содержимое страницы |
|------------------------|
|🪨 Подвал |Когда контента много (сравнимо с водой в сосуде), камушек (подвал) остается на дне:
|📄...📄...📄...📄|
|🪨 Подвал |И при недостаточном количестве контента подвал всё равно остается на дне благодаря магии CSS:
html, body {
height: 100%;
}Подвал, словно булыжник, всегда находится внизу, удобно и надежно размещаясь, без необходимости применять фиксацию:
|📄 Содержимое страницы |
| |
|🪨 Подвал |С правильно спроектированной страницей достигается истиное спокойствие!
Продвинутые концепции и практические приёмы
Прощай, фиксированный подвал
Динамичный контент порой несовместим с фиксированными решениями. Flexbox поможет подвалу понять, когда нужно уступить место и пропустить новый контент.
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1; /* "Я должен расти," подчеркивает основное содержимое. */
}Выглядим хорошо с инвертированными цветами
Хотите добавить подвалу стильности в духе Джеймса Бонда? Воспользуйтесь классом navbar-inverse от Bootstrap для мгновенной смены дизайна.
<footer class="navbar-inverse"> <!-- Подвал в стиле спецагента -->
<!-- Содержание подвала -->
</footer>Практическое применение
Позаимствуйте идеи из рабочих примеров при воплощении этих концепций в жизнь. Они были успешно протестированы в реальных условиях и демонстрировали свою эффективность в работе по вёрстке.
Полезные материалы
- Sticky Footer Template for Bootstrap — официальное руководство по созданию стики-подвала в Bootstrap.
- Sticky Footer, Five Ways | CSS-Tricks — пять способов надёжной фиксации подвала.
- A Complete Guide to Flexbox | CSS-Tricks — полное руководство по Flexbox, включая решение для прижатого подвала.
- css – Flushing footer to bottom of the page, twitter bootstrap – Stack Overflow — собрание решений и советов по вёрстке подвалов в Bootstrap от сообщества Stack Overflow.
- Just a moment... — рабочий пример стики-подвала в Bootstrap, демонстрирующий практическую реализацию.