Как закрепить футер внизу страницы или контента на JS

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

Для того чтобы футер оставался внизу страницы, мы используем Flexbox, задаем для главного контейнера display: flex и flex-direction: column, а также допускаем, что содержимое займет всю доступную область, применяя flex: 1. Это гарантирует, что футер всегда будет находиться внизу — выровнен вдоль нижнего края окна браузера или располагаться сразу после содержимого.

html, body { 
    height: 100%; /* Обязательное условие для заполнения всего экрана! 🥳 */
    margin: 0; 
}
#container {
    display: flex; /* Добавляем гибкость 💪 */
    flex-direction: column; /* Вертикальная ориентация 🎢 */
    min-height: 100%; 
} 
#content { 
    flex: 1; /* Содержимое занимает все доступное пространство 🌌 */
}
footer {
    height: 50px; /* Футер получает фиксированное свое место 😎 */
}

Расположите контент в блоке #content, а затем добавьте footer в #container:

<div id="container">
  <div id="content">Ваш контент</div>
  <footer>Ваш футер</footer>
</div>

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

Задание фиксированной высоты футера

Установите фиксированную высоту для футера и соответствующий нижний внутренний отступ #content:

#content {
    padding-bottom: 50px; /* Высота и нижний отступ совпадают, чтобы контент и футер не перекрывались ✌️ */
    box-sizing: border-box;
}

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

Адаптация футера к динамически изменяющемуся содержимому

При динамической высоте футера используйте Flexbox:

footer {
    flex-shrink: 0; /* Футер останется неизменным, независимо от его размеров! 🦾 */
}

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

Растягивание контейнера на максимально возможную высоту

Необходимо, чтобы контейнер занимал, как минимум, полную высоту окна просмотра:

#container {
    min-height: 100vh; /* Контейнер растягивается на весь вьюпорт — подходит для всех, даже для маленьких хоббитов 🧙‍♂️ */
    flex-direction: column;
}

Использование единиц вьюпорта позволяет контейнеру занять всю доступную высоту.

Гармоничное сочетание контента и футера

Четкая структура HTML-разметки важна для усовершенствования восприятия и читабельности:

<header>Ваш заголовок</header>
<nav>Ваша навигация</nav>
<article>Ваш контент</article>
<footer>Ваш футер</footer>

Элементы header, nav, article и footer упрощают чтение и поддержку структуры, подобно аккуратно упорядоченной книжной полке 📚.

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

Представьте, что футер всегда находится там, где нужно, несмотря на изменения его высоты:

Объем содержимого  |  Позиция футера   |  Внешний вид
-------------------|-------------------|-----------
Маленький          |  Внизу            |  📄📄
                  |                   |  🟩 (футер)

А когда объем содержимого увеличивается,

Объем содержимого  |  Позиция футера   |  Внешний вид
------------------|-------------------|-----------
Большой           |  После содержимого|  📄📄
                  |                   |  🔳 (футер)

Футер ведет себя, как расширяющаяся резинка: занимает свободное пространство внизу страницы или следует за контентом, адаптируясь к его объему. 🪀👇📄🔳

Позиционирование футера с использованием CSS Grid

CSS Grid — это ещё один метод, помогающий контролировать положение футера:

body {
    display: grid;
    grid-template-rows: 1fr auto; /* Содержимому мы выделяем 1fr, а футеру — auto */
    min-height: 100vh; /* Растягиваем контейнер на весь вьюпорт 🚀 */
}

Свойство 1fr позволяет содержимому занимать столько пространства, сколько ему требуется, и одновременно удерживает футер в конце страницы или после содержимого.

Создание адаптивного футера для различных устройств

Для обеспечивания правильного отображения футера на различных устройствах используем медиа-запросы:

@media (max-width: 600px) {
    footer {
        height: 100px; /* Футер становится выше при уменьшении ширины вьюпорта! 🤧 */
    }
    #content {
        padding-bottom: 100px; /* Соответственно увеличиваем и нижний отступ! 🏃‍♂️ */
    }
}

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

Профессиональные методы для расположения футера

Проверяйте внешний вид вашего сайта при различных условиях, чтобы футер всегда вел себя предсказуемо при изменении объема контента. Следите за обновлениями по созданию футера на ресурсах, вроде CSS-Tricks.

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

Создание демонстрационной модели

Для лучшего восприятия вашей идеи создайте интерактивный пример, используя платформы, вроде CodePen. Это позволит наглядно продемонстрировать ваш подход.

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

1. Пять методов создания футера, "прилипающего" к низу | CSS-Tricks — различные техники для достижения фиксации футера внизу.
2. position – CSS: Каскадные таблицы стилей | MDN — подробное описание свойства position в CSS, которое нужно для понимания позиционирования футера.
3. CSS Flexible Box Layout Module Level 1 — официальная спецификация W3C для CSS Flexbox, полезная для изучения гибких раскладок.
4. Как "прилепить" футер к низу страницы с использованием Bootstrap — Stack Overflow — способы "прилипания" футера при использовании CSS-фреймворков.
5. Flexbox | Codrops — всеобъемлющий справочник по Flexbox.
6. Прилипающий футер: решение проблемы "плавающего" футера на коротких страницах — YouTube — видеоурок по созданию футера, "прилипающего" внизу с использованием Flexbox.