Если на страницах вашего сайта предположительно будет немного контента, то вам, скорей всего придет в голову мысль "А как, собственно, можно сделать так, чтобы футер не подпрыгивал вверх, а всегда оставался внизу?". В этой статье вы найдете 5 способов, позволяющие реализовать "прибитый" к низу футер.
Такой футер еще называют sticky, или "липкий" футер. Хотя есть и другой подход в создании sticky/липких футеров (а также хедеров), когда этот элемент всегда отображается внизу экрана, как бы зависая или "прилипая" к нему. Но это тема для другой статьи. Здесь мы рассмотрим футер, который располагается всегда внизу экрана (чаще именно на компьютере, а не на мобильном), т.к. контента на странице не слишком много.
Благодаря всем усовершенствованиям CSS за прошедшие годы, теперь существует множество надежных способов создания «липких» футеров без использования сложных ухищрений или не всем понятного кода на JavaScript. Давайте рассмотрим здесь только CSS-способы.
В большинстве примеров мы будем использовать одинаковую базовую HTML-разметку, состоящую из шапки (<header>), основного контента (<main>) и подвала (<footer>):
1 2 3 4 5 | <body> <header>Header</header> <main>Main Content</main> <footer>Footer</footer> </body> |
Кроме того, во всех примерах есть кнопка с текстом "Change Content", которая позволяет отобразить спрятанные в css абзацы в основном теге <main> и увеличить (при повторном клике - уменьшить) контент этого блока.
Понятное дело, что реальный сайт имеет куда больше элементов, но сам подход будет тем же, что в упрощенных примерах ниже.
Способ 1. Футер с абсолютным позиционированием
Этот пример подразумевает 2 обязательных момента: вы должны явно задать высоту футера и такого же размера сделать внутренний отступ снизу с помощью css-свойства padding-bottom для элемента html. Кроме того, у html должно быть относительное позиционирование, а у футера - абсолютное.
1 2 3 4 5 6 7 8 9 10 11 12 13 | html { position: relative; min-height: 100%; padding-bottom: 100px; box-sizing: border-box; } footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; } |
Ниже вы найдете готовый пример со всеми свойствами.
See the Pen CSS Sticky Footer demo #1 by Elen (@ambassador) on CodePen.
Способ 2. Футер с относительным позиционированием
Этот пример в чем-то подобен предыдущему, т.к. тоже предполагает 2 момента: футер должен быть фиксированной высоты, а контейнер, его содержащий (в примере <div class="wrapper">) - иметь минимальную высоту, которая рассчитывается с помощью функции calc, как высота экрана мину указанная высотафутера: min-height: calc(100vh - 100px).
1 2 3 4 5 6 7 8 | .wrapper { min-height: calc(100vh - 100px); } footer { position: relative; background: #64abf4; height: 100px; } |
Пример вживую:
See the Pen CSS Sticky Footer demo #2 by Elen (@ambassador) on CodePen.
Способ 3. Используем модель Flexbox
Пожалуй, это один из самых простых и самых популярных на данный момент способов прибить футер страницы к низу за счет Flexbox-модели. Суть его проста и работает не только для футера, но и для любого другого блока: карточки товара, преимуществ сотрудничества, статей с разной высотой предварительного контента и кнопкой "Подробнее" и т.п.
Ну, и прелесть этого способа, как и других, что идут ниже, заключается в том, что вам не нужно жестко указывать высоту футера.
Суть его заключается в том, что родительскому элементу назначаются свойства display: flex и flex-direction: column, а вложенному элементу задается margin-top: auto:
1 2 3 4 5 6 7 8 | body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; } |
Что касается минимальной высоты в 100vh, то это свойство имеет смысл писать только тем элементам, которые должны занимать у вас весь экран по высоте, как body.
И ниже - пример с футером, прибитым к низу за счет свойств модель Flexbox
See the Pen CSS Sticky Footer demo #4 by Elen (@ambassador) on CodePen.
Способ 4. Свойство flex модели Flexbox
Этот пример опять-таки основан на модели Flexbox (не зря в свое время она стала очень популярной в верстке!). В этом случае мы не задаем футеру margin-top: auto, а используем свойство flex, заставляющее один из flex-элементов расширяться:
1 2 3 4 5 6 7 8 9 10 | body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; /* или */ /*flex-grow: 1; */ } |
Дело в том, что изначально обобщенное свойство flex содержит 3 свойства: flex-grow (фактор растягивания flex-элемента), flex-shrink (фактор сужения flex-элемента) и flex-basis (базовый размер flex-элемента). Однако при использовании одной цифры в качестве значения свойства flex все сводится только к тому, что мы указываем flex-grow. Даже при значении 1 это заставляет соответствующий элемент (а у нас это main) растянуться на все доступное пространство, если у других элементов не указан flex-grow. Собственно, поэтому вместо свойства flex можно использовать свойство flex-grow: 1.
Смотрим на результат:
See the Pen CSS Sticky Footer demo #3 by Elen (@ambassador) on CodePen.
Еще один пример, но с уже более разнообразным наполнением и свойством flex-grow: 1 для элемента main с классом .site-main вы найдете ниже.
See the Pen How to Build a Sticky Footer With Flexbox by HTML-plus (@ambassador) on CodePen.
В этом примере вы можете увидеть, как аналогичный подход прибивает к низу карточки блок с двумя кнопками.
See the Pen CSS Sticky Footer demo #6 card by HTML-plus (@ambassador) on CodePen.
Способ 5. Используем модель Grid
Модель Grid - тоже отличный инструмент для управления размером элементов в плане того, что она, как и модель Flexbox дает возможность растягивать элементы на все доступное пространство. Поскольку нам нужно вертикальное растяжение, то и свойство, которое нам поможет, отвечает за rows - вертикальные строки в модели Grid.
В случае, когда мы прибиваем футер к низу имеет смысл использовать не body, как корневой элемент, а добавить <div class="wrapper">, для которого указать такие свойства:
1 2 3 4 5 6 7 8 9 10 | .wrapper { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } header, footer { background: #64abf4; padding: 30px 15px; text-align: center; } |
Как видите, для header и footer нет жестко заданной высоты - только фон и отступы. А вот свойство grid-template-rows: auto 1fr auto для .wrapper как раз и позволяет подхватывать автоматически формируемую высоту шапки и подвала и растягивать на остальное доступное пространство высоту main. А это вся высота экрана, определяемая, как min-height: 100vh .
Упрощенный пример:
See the Pen CSS Sticky Footer demo #5 grid by HTML-plus (@ambassador) on CodePen.
Пример посложнее, но с тем же принципом и свойствами для .site-wrapper.
See the Pen How to Build a Sticky Footer With CSS Grid by HTML-plus (@ambassador) on CodePen.
Заключение
Надеюсь, вы нашли наиболее приемлемый для вас способ прибить футер к низу страницы, чтобы ваш контент всегда выглядел отлично. Обратите внимание, что все способы предполагают использование исключительно css-свойства, чтобы реализовать задачу. JavaScript в примерах нужен только для добавления контента по клику на кнопку в блоке main.
Удачи в верстке!
