Как создать липкий нижний колонтитул с помощью CSS
С помощью HTML и CSS можно создать множество различных эффектов для веб-сайта. Один из самых простых примеров — закрепление элемента в любой части страницы во время прокрутки. В этой статье мы объясним, что такое нижний колонтитул и как его закрепить без JavaScript. Мы также рассмотрим примеры нижних колонтитулов в HTML.
Что такое нижний колонтитул?
Нижний колонтитул — это элемент, расположенный в нижней части веб-сайта. Иногда этот элемент закрепляется на странице, чтобы оставаться видимым при прокрутке. При прокрутке оно всегда остаётся на месте.
Далее рассмотрим несколько наглядных примеров того, как закрепить нижний колонтитул HTML на странице.
Пример 1
Мы создадим простой нижний колонтитул сайта в виде цветного блока с одним словом.
Шаг 1. Напишите HTML-код с большим количеством абзацев, чтобы продемонстрировать фиксированный элемент во время прокрутки:
<html>
<head>
<style>
</style>
</head>
<body>
<h1>A simple example of a sticky footer</h1>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<p>This text is additional</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Шаг 2. С помощью CSS мы выберем шрифт для текста на странице, зададим цвет фона и настроим расположение элемента:
<style>
body {
font-family: PT Astra Sans;
background-color: #e9e9f0;
}
.footer {
background-color: #2e34e5;
position: fixed;
right: 0;
bottom: 0;
text-align: center;
width: 99%;
font-size: 19px;
font-weight: bold;
color: #fafaff;
}
</style>
В результате у нас получится синий нижний колонтитул на сайте, который всегда остаётся внизу при прокрутке. Этот элемент с текстом будет занимать всю ширину окна.
Пример 2
Как создать нижний колонтитул сайта со ссылками на внешние ресурсы? Мы объясним это на втором примере: ссылки будут вести на изображения с бесплатного сайта с фотостоками.
Шаг 1. Добавьте ссылки на три разных изображения, чтобы мы могли включить их в нижний колонтитул HTML:
<html>
<head>
<style> </style>
</head>
<body>
<h2>An example of a sticky footer with links to images</h2>
<div class="wrapper">
<div class="footer">
<p class="text">
<a href="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" class="menu">Pic1</a>
<a href="https://images.unsplash.com/photo-1570092178365-4cd46034bb19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" class="menu">Pic2</a>
<a href="https://images.unsplash.com/photo-1604231751678-3f2b03928c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" class="menu">Pic3</a>
</p>
</div>
</div>
</body>
</html>
Шаг 2. С помощью CSS мы настроим размеры сайта и нижний колонтитул с тремя ссылками:
.wrapper {
height: 1111px;
}
.footer {
background-color: #aac5fa;
position:fixed;
right:0;
bottom:0;
width:99%;
height: 101px;
}
.text {
float:none;
font-size:29px;
word-spacing:40px;
padding-left:29px;
}
</style>
Шаг 3. Давайте сделаем так, чтобы при наведении курсора на ссылки менялся размер текста и цвет фона.
<style>
a:active {
text-decoration: none;
}
a:link {
text-decoration: none;
}
a.menu:hover {
font-size:29px;
background-color:#8eff8c;
}
</style>
Пример 3
Теперь давайте посмотрим, как создать нижний колонтитул HTML-сайта со ссылками на изображения двух популярных сайтов. Нам не понадобится тег <footer>.
Шаг 1. Напишите код большим абзацем, добавьте значки Facebook и Twitter и ссылки на их сайты.
<html>
<head>
<style></style>
</head>
<body>
<div id="wrapper">
This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling. This text is simply included to show how the footer will move during scrolling.
</div>
<div id="footer">
<div class="all-symbols">
<a href="https://facebook.com/"><img src="https://cdn-icons-png.flaticon.com/256/20/20837.png" class="symbol" alt="FB icon"></a>
<a href="https://x.com/"><img src="https://cdn-icons-png.flaticon.com/256/5969/5969020.png" class="symbol" alt="TW icon"></a>
</div>
</div>
</body>
</html>
Шаг 2. С помощью CSS закрепите нижний колонтитул в нижней части страницы и настройте цвета и другие параметры. Фон страницы будет серым, а фон элемента со значками — синим.
<style>
#wrapper {
margin: 344 auto 433px;
width: 399px;
}
body {
background-color: e2e1eb;
}
#footer {
background-color: #301fed;
position: fixed;
left: 0;
bottom: 0;
height: 70px;
padding-left: 29px;
color: #f3f2ff;
width: 99%;
}
.all-symbols {
float:left;
margin-top:19px;
padding-left:199px;
}
.symbol {
color: #fffcfc;
margin-top:6px;
margin-left:29px;
height:29px;
}
</style>
Шаг 3. Теперь сделайте так, чтобы при наведении курсора на значки цвет фона становился белым:
<style>
.symbol:hover {
padding:2px;
background-color:#fffcfc;
}
</style>
В результате у нас получится страница, в нижнем колонтитуле которой будут значки Facebook и Twitter, ведущие на соответствующие сайты.
Пример 4
Теперь давайте посмотрим, как сделать так, чтобы нижний колонтитул HTML располагался в нижней части страницы с необычным эффектом. Блок будет скрыт под страницей; чтобы его отобразить, пользователи должны взаимодействовать с другим элементом. В данном случае этим элементом будет красный пунктирный квадрат.
Шаг 1. Добавьте в HTML-код несколько абзацев. Так будет проще проверить, как нижний колонтитул отображается на странице:
<style> </style>
<h1>To find the footer, hover your cursor over the red square.</h1>
<h2><p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p><p>A simple paragraph is for example here.</p></p></h2>
<div class="wrapper">
<div class="footer">
<div id="button"></div>
<div id="block">
<div id="text">
<div class="footer1">
<h1>Hidden footer</h1>
</div>
</div>
</div>
</div>
Шаг 2. Далее добавьте следующий код CSS для определения фона, нижнего колонтитула и других параметров. Мы будем использовать шрифт PT Astra Sans; фон будет светло-голубым.
<style>
.wrapper {
height: 1111px;
}
body{
background-color:#8f85ff;
font-family: PT Astra Sans;
text-align:center;
color:#e8e6fc;
}
.footer #block{
position:relative;
margin-top:2px;
width:99,99%;
height:99%;
background: #120f2b;
}
.footer #text{
Position: relative;
right:201px;
width:123px;
margin:14 auto;
top:-51px;
}
.footer1{
float:left;
width:499px;
}
.footer h1{
color: #ffc9c9;
font-family: PT Astra Sans;
margin-top:69px;
margin-left:39px;
}
</style>
Шаг 3. Создайте красный квадрат, который откроет скрытый блок. Используя пунктирное значение, сделайте объект пунктирным, чтобы он выделялся ещё сильнее.
<style>
…
.footer #button{
width:50px;
height:50px;
border: #d41542 8px dashed;
margin:-3 auto;
position:center;
}
.footer #button:hover{
width:50px;
height:50px;
border: #d41542 8px dashed;
}
.footer {
position: fixed;
right:0;
bottom:0;
width: 99%;
height: 2em;
overflow:hidden;
transition: all 2s ease;
}
.footer:hover {
transition: all 2s ease;
height: 9em;
}
…
</style>
В результате получится страница, на которой скрытый нижний колонтитул CSS плавно появляется и исчезает в любой точке прокрутки. Мы можем применить этот эффект к любой части страницы. Нижний колонтитул появляется только при наведении курсора на нижнюю часть окна.
Заключение
Мы рассмотрели четыре способа добавления нижнего колонтитула HTML на сайт. Особенно полезными оказались следующие свойства и значения CSS:
position: fixed;
right: 0;
bottom: 0;
Вместо текста и ссылок вы можете добавить в нижний колонтитул форму поиска по сайту или запрос для клиентов, чтобы они оставили свои контактные данные. Однако такие большие блоки могут мешать просмотру страницы. В таких случаях может пригодиться метод из примера 4: создание небольшого элемента для скрытия нижнего колонтитула HTML.
Редактор: AndreyEx
