Как создать липкий футер с помощью flexbox

Как создать липкий футер с помощью flexbox

От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до нижней части страницы. К счастью, нам больше не нужен такой хак!

В этой статье мы покажем вам простую технику, которая позволяет создать липкий футер с помощью flexbox. Для его реализации требуется всего несколько строк кода и несколько минут.

Начинаем с HTML

В HTML-файле мы создаем заголовок, два абзаца с текстом lorem ipsum и футер, чтобы мы могли легко проверить функционал липкого футера. Откройте редактор кода, создайте новую папку (или проект, в зависимости от редактора кода) и пустой файл index.html внутри него. Затем добавьте следующий код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Добавьте базовые стили в CSS

Чтобы наша демо-версия работала, давайте начнем CSS-файл с простых сбросов и основных стилей. Однако обратите внимание, что эти базовые стили являются всего лишь рекомендациями, и вы можете использовать вместо них любые другие стили — они не требуются для функционала липкого футера.

Создайте файл style.css в той же папке, где находится ваш файл index.html . Затем добавьте в него следующий код:

Стили футера

Теперь мы добавим также несколько стилей CSS футера, однако отметим, что это еще не касается функционала липкого футера. Вы можете изменить эти основные стили по своему вкусу. Добавьте следующий код в файл stlye.css под предыдущим блоком CSS:

Если вы посмотрите демоверсию сейчас, она будет выглядеть следующим образом:

Как создать липкий футер с помощью flexbox

Как видите, футер отображается в середине экрана из-за недостатка содержимого. На следующем шаге мы сместим его вниз с помощью flexbox.

Делаем футер липким с помощью flexbox

Теперь давайте посмотрим код CSS, который нам нужно использовать для создания липкого футера с помощью flexbox. На самом деле это всего лишь пять правил CSS. Вы можете использовать эту технику с любым видом футера в любом браузере, который поддерживает flexbox. Поддержка Flexbox довольно хороша; в настоящее время 97,93% всех используемых браузеров поддерживают его, и со временем процент станет еще выше.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот код, который нужно добавить в файл style.css. В идеале вы должны добавить этот фрагмент перед общими стилями футера (добавленными на предыдущем шаге):

В приведенном выше коде мы создали flex-макет на основе столбцов с помощью правил display: flex; и flex-direction: column;. В результате весь тег body является flex-столбцом — с .content вверху и footer внизу экрана.

В правиле min-height: 100vh; используются единицы окна просмотра vh, это гарантирует, что элемент body охватывает всю высоту области просмотра.

Мы также использовали свойства flex и flex-shrink . Свойство flex является сокращенным свойством, которое может иметь разное количество значений. Когда он имеет только одно значение, это обозначает flex-grow, что определяет выделение дополнительного пространства на экране (если оно есть). Правило flex: 1; означает, что основное содержимое (.content ) должно занимать все доступное место на экране.

Чтобы скомпенсировать этот эффект, мы также используем для футера свойство flex-shrink со значением 0. Это свойство определяет, что происходит, когда на экране недостаточно места. Если его значение равно 0, это означает, что этот элемент не должен уменьшаться, что бы ни происходило. Таким образом, нам не нужно бояться, что нижний колонтитул каким-то образом исчезнет (или уменьшится) на экране.

Демонстрация

Теперь, если вы посмотрите на демонстрацию, то увидите, что браузер добавил нужное количество пустого пространства снизу от содержимого, а футер приятно прилипает к нижней части страницы:

Как создать липкий футер с помощью flexbox

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

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

Весь файл CSS

Вот как должен выглядеть весь файл style.css с правилами закрепления нижнего колонтитула, объединенными с остальной частью кода:

Следующие шаги

Flexbox является отличным модулем макетов для реализации простых и сложных макетов и функций. Отличной идеей будет создать липкий футер, даже если вы не думаете, что он вам может понадобиться, так как некоторые пользователи могут использовать огромный экран, на котором контент может легко заканчиваться до конца страницы. С помощью flexbox это всего лишь несколько строк дополнительного кода.

Источник: https://www.developerdrive.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox

Изучите работу с Flexbox

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий