От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до нижней части страницы. К счастью, нам больше не нужен такой хак!
В этой статье мы покажем вам простую технику, которая позволяет создать липкий футер с помощью flexbox. Для его реализации требуется всего несколько строк кода и несколько минут.
Начинаем с HTML
В HTML-файле мы создаем заголовок, два абзаца с текстом lorem ipsum и футер, чтобы мы могли легко проверить функционал липкого футера. Откройте редактор кода, создайте новую папку (или проект, в зависимости от редактора кода) и пустой файл index.html внутри него. Затем добавьте следующий код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Footer with Flexbox</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="content"> <h1>Sticky Footer with Flexbox</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <footer> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </footer> </body> </html>
Добавьте базовые стили в CSS
Чтобы наша демо-версия работала, давайте начнем CSS-файл с простых сбросов и основных стилей. Однако обратите внимание, что эти базовые стили являются всего лишь рекомендациями, и вы можете использовать вместо них любые другие стили — они не требуются для функционала липкого футера.
Создайте файл style.css в той же папке, где находится ваш файл index.html . Затем добавьте в него следующий код:
/* Basic styles */
* { box-sizing: border-box; font-family: sans-serif; margin: 0;
}
body { font-size: 1rem;
}
.content { padding: 1.5rem;
}
h1,
p { margin: 1rem 0;
}Стили футера
Теперь мы добавим также несколько стилей CSS футера, однако отметим, что это еще не касается функционала липкого футера. Вы можете изменить эти основные стили по своему вкусу. Добавьте следующий код в файл stlye.css под предыдущим блоком CSS:
/* Basic footer styles */
footer { width: 100%; background: #111; margin-top: 1.5rem;
}
ul { padding: 1.25rem; text-align: center;
}
ul li { list-style-type: none; display: inline-block; margin: 0.25rem 0.75rem;
}
ul a { color: #fff; text-decoration: none;
}
ul a:hover { text-decoration: underline;
}Если вы посмотрите демоверсию сейчас, она будет выглядеть следующим образом:
Как видите, футер отображается в середине экрана из-за недостатка содержимого. На следующем шаге мы сместим его вниз с помощью flexbox.
Делаем футер липким с помощью flexbox
Теперь давайте посмотрим код CSS, который нам нужно использовать для создания липкого футера с помощью flexbox. На самом деле это всего лишь пять правил CSS. Вы можете использовать эту технику с любым видом футера в любом браузере, который поддерживает flexbox. Поддержка Flexbox довольно хороша; в настоящее время 97,93% всех используемых браузеров поддерживают его, и со временем процент станет еще выше.
Вот код, который нужно добавить в файл style.css. В идеале вы должны добавить этот фрагмент перед общими стилями футера (добавленными на предыдущем шаге):
/* Sticky Footer */
body { min-height: 100vh; display: flex; flex-direction: column;
}
.content { flex: 1;
}
footer { flex-shrink: 0;
}В приведенном выше коде мы создали 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, это означает, что этот элемент не должен уменьшаться, что бы ни происходило. Таким образом, нам не нужно бояться, что нижний колонтитул каким-то образом исчезнет (или уменьшится) на экране.
Демонстрация
Теперь, если вы посмотрите на демонстрацию, то увидите, что браузер добавил нужное количество пустого пространства снизу от содержимого, а футер приятно прилипает к нижней части страницы:
Вы также можете поэкспериментировать с добавлением контента на страницу. Вы увидите, что, когда на экране больше нет свободного места, и страница становится прокручиваемой, футер ведет себя как обычный футер. Он не будет прилипать к нижней части страницы, а просто прокручивает вверх и вниз, как остальное содержимое.
Вы также можете посмотреть нашу демонстрационную версию, чтобы увидеть, как функционал липкого футера выглядит на реальном сервере. Чтобы посмотреть исходный код, вы можете открыть инструменты разработчика браузера, нажав клавишу F12.
Весь файл CSS
Вот как должен выглядеть весь файл style.css с правилами закрепления нижнего колонтитула, объединенными с остальной частью кода:
* { box-sizing: border-box; font-family: sans-serif; margin: 0;
}
body { font-size: 1rem; /* Sticky footer */ min-height: 100vh; display: flex; flex-direction: column;
}
.content { padding: 1.5rem; /* Sticky footer */ flex: 1;
}
/* Basic footer styles */
footer { width: 100%; background: #111; margin-top: 1.5rem; /* Sticky footer */ flex-shrink: 0;
}
h1,
p { margin: 1rem 0;
}
ul { padding: 1.25rem; text-align: center;
}
ul li { list-style-type: none; display: inline-block; margin: 0.25rem 0.75rem;
}
ul a { color: #fff; text-decoration: none;
}
ul a:hover { text-decoration: underline;
}Следующие шаги
Flexbox является отличным модулем макетов для реализации простых и сложных макетов и функций. Отличной идеей будет создать липкий футер, даже если вы не думаете, что он вам может понадобиться, так как некоторые пользователи могут использовать огромный экран, на котором контент может легко заканчиваться до конца страницы. С помощью flexbox это всего лишь несколько строк дополнительного кода.
Источник: https://www.developerdrive.com
Редакция: Команда webformyself.