Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Кратко о задаче
Футер — это объект, который находится внизу сайта. Иногда такой элемент закрепляют на странице, чтобы при прокрутке он всегда был на виду. Эффект при этом будет такой же, как, например, у блока с чатом на сайте simple-server.tech. При скроллинге он всегда остается на месте:
Далее рассмотрим несколько наглядных примеров, как зафиксировать HTML footer на странице.
Создадим простой футер сайта**** в виде цветного блока с одним словом.
Шаг 1. Напишем HTML-код с большим количеством абзацев, чтобы при прокрутке показать зафиксированный элемент:
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Простой пример зафиксированного подвала</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>В итоге получится синий футер на сайте, который при прокрутке страницы всегда остается внизу. Такой объект с текстом растянут по всей ширине окна.
Как сделать подвал сайта так, чтобы в нем были ссылки на внешние ресурсы? Об этом мы расскажем во втором примере: ссылки будут на фотографии бесплатного фотостока.
Шаг 1. Добавим ссылки на три разных изображения, чтобы потом добавить их в footer 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>В итоге получится такой**** footer HTML CSS:
Теперь рассмотрим вариант, как сделать подвал сайта HTML с изображениями-ссылками на два популярных сайта в России. Тег footer не понадобится.
Шаг 1. Напишем код с большим абзацем, добавим значки соцсетей «ВКонтакте» и «Одноклассники», а также укажем ссылки на их сайты:
Шаг 2. С помощью CSS-кода закрепим footer внизу страницы и выберем параметры по цвету и не только. Фон страницы будет серым, а объекта со значками — синим.
<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>В результате получится страница, на которой футер будет со значками «ВКонтакте» и «Одноклассники»: по ним можно перейти на сайты соцсетей.
Теперь рассмотрим, как сделать footer внизу страницы HTML с необычным эффектом. Блок будет спрятан под страницей — чтобы его показать, нужно обратить внимание на другой объект. В этом случае таким элементом будет красный квадрат с пунктиром.
Шаг 1. В HTML-код добавим много абзацев: будет удобнее проверить фиксацию футера на странице:
<style> </style>
<h1>Чтобы найти footer, наведите курсор на красный квадрат</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="knopka"></div>
<div id="block">
<div id="text">
<div class="footer1">
<h1>Спрятанный футер</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. Теперь создадим красный квадрат, который будет показывать спрятанный блок. При помощи значения dashed сделаем такой объект пунктирным, чтобы он выделить его еще больше.
<style>
…
.footer #knopka{
width:50px;
height:50px;
border: #d41542 8px dashed;
margin:-3 auto;
position:center;
}
.footer #knopka: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>В итоге выйдет страница, на которой спрятанный footer CSS будет плавно появляться и исчезать в любом моменте прокрутки. Такой эффект доступен на любой части страницы. Футер появляется только тогда, когда курсор наведен вниз окна.
Нужен сервер для практики? Закажите VPS на Simple-Server — root-доступ, NVMe, DDoS-защита и поддержка 24/7.