Больше не нужно искать работу мечты — присоединяйтесь к команде Клауда

Как создать фиксированный footer с помощью CSS

Команда Timeweb Cloud
Команда Timeweb Cloud
Наши инженеры, технические писатели, редакторы и маркетологи
01 апреля 2022 г.
17610
10 минут чтения
Средний рейтинг статьи: 4

При помощи HTML и CSS можно создать много разных эффектов для сайта. Один из самых простых примеров — это фиксация элемента в любой части страницы при скроллинге. В этой статье мы расскажем, что собой представляет футер и как его зафиксировать без JavaScript. Также рассмотрим footer HTML примеры. 

Как Создать Фиксированный Footer С Помощью CSS (1)

Что такое footer 

Футер — это объект, который находится внизу сайта. Иногда такой элемент закрепляют на странице, чтобы при прокрутке он всегда был на виду. Эффект при этом будет такой же, как, например, у блока с чатом на сайте timeweb.cloud. При скроллинге он всегда остается на месте:

Image1

Далее рассмотрим несколько наглядных примеров, как зафиксировать HTML footer на странице. 

Пример 1

Создадим простой футер сайта в виде цветного блока с одним словом. 

Шаг 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>

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

Image5

Пример 2

Как сделать подвал сайта так, чтобы в нем были ссылки на внешние ресурсы? Об этом мы расскажем во втором примере: ссылки будут на фотографии бесплатного фотостока. 

Шаг 1. Добавим ссылки на три разных изображения, чтобы потом добавить их в footer HTML

<html>
<head>

<style> </style>
</head>
<body>
<h2>Пример зафиксированного подвала со ссылками на изображения</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">Фото1</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">Фото2</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">Фото3</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>

В итоге получится такой footer HTML CSS

Image3

Пример 3

Теперь рассмотрим вариант, как сделать подвал сайта HTML с изображениями-ссылками на два популярных сайта в России. Тег footer не понадобится. 

cloud

Шаг 1. Напишем код с большим абзацем, добавим значки соцсетей «ВКонтакте» и «Одноклассники», а также укажем ссылки на их сайты: 

<html>
 <head>
  <style></style>
 </head>
 <body>
  <div id="wrapper">
   Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.   
  </div>
  <div id="footer">
  <div class="all-symbols">
  <a href="https://vk.com/feed"><img src="https://cdn-icons-png.flaticon.com/512/25/25684.png" class="symbol" alt="VK icon"></a>
  <a href="https://ok.ru/"><img src="https://cdn-icons-png.flaticon.com/512/48/48971.png" class="symbol" alt="OK icon"></a>
</div>
  </div>
 </body>
</html>

Шаг 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>

В результате получится страница, на которой футер будет со значками «ВКонтакте» и «Одноклассники»: по ним можно перейти на сайты соцсетей.

Image4

Пример 4

Теперь рассмотрим, как сделать 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 будет плавно появляться и исчезать в любом моменте прокрутки. Такой эффект доступен на любой части страницы. Футер появляется только тогда, когда курсор наведен вниз окна.  

Image2

Выгодные тарифы на облачные серверы в Timeweb Cloud

Итоги 

Мы рассмотрели 4 способа, как зафиксировать подвал сайта HTML. В основном нам помогли следующие CSS-свойства со значениями:

  1. Position: fixed;
  2. Right: 0;
  3. Bottom: 0.

Вместо текста и ссылок в футере можно указать форму для поиска по сайту или запрос клиентам оставить свои контактные данные. Но такие большие блоки могут мешать просмотру страницы. В этом случае поможет способ, который мы рассмотрели в 4 примере: можно создать небольшой элемент, скрывающий подвал HTML.  

Хотите внести свой вклад?
Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию
img-server
01 апреля 2022 г.
17610
10 минут чтения
Средний рейтинг статьи: 4
Пока нет комментариев