Как сделать фиксированную нижнюю часть для сайта.

Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev ;)

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

Давайте рассмотрим конкретный пример. У нас на странице есть определенная текстовая информация, а в самом низу (в нижней части сайта) находится блок с рекламой.

2016-04-10_21-04-29

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

Согласитесь, что это очень интересный и полезный эффект?

Давайте сейчас разберемся, как такое можно сделать на практике. Есть несколько способов, как этого можно добиться, но я остановлюсь на самом современном из них – фиксированное позиционирование с помощью стилей CSS.

Для того, чтобы понять, как все работает, нам нужно создать пробную html-страницу и создать в нем два блока <div>.

<div>Это основное содержание сайта Это основное  содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное  содержание сайта Это основное содержание сайта
Это основное содержание сайта  Это основное содержание сайта
Это основное содержание сайта Это основное  содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное содержание  сайта Это основное содержание сайта
Это основное содержание сайта Это основное  содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное  содержание сайта Это основное содержание сайта
Это основное содержание сайта  Это основное содержание сайта
Это основное содержание сайта Это основное  содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное содержание сайта Это основное содержание сайта
Это основное  содержание сайта Это основное содержание сайта
Это основное содержание сайта  </div>
<div id="footer"> Это нижняя часть  сайта</div>

Больше моих уроков по Javascript здесь.

Основное содержание просто размножьте до такой степени, чтобы html-страницу можно было прокручивать в браузере. А нижней части присвойте идентификатор id="footer", далее мы ему будем назначать нужные стили CSS.

На самом деле это самое позиционирование элемента в нужном месте экрана осуществляется всего-навсего с помощью одного свойства CSS position:fixed. Смотрите, как его можно использовать на практике.

Код CSS-файла

#footer {
position:fixed;
bottom:0px;
text-align:center;
background:#990000;
color:#FFFFFF;
width:100%;
}

Идентификатору footer, который мы с вами указали ранее для тэга <div>, присваиваем стили CSS.

position:fixed; - позиция блока фиксированная и положения своего не меняет.
bottom:0px; - блок этот должен находиться в самом низу html-страницы.

Следующие свойства отвечают за отображение внешнего вида блока, чтобы его можно было отличить от основного текста:

text-align:center; - выравнивание текста по центру
background:#990000; - цвет заднего фона
color:#FFFFFF; - цвет текста
width:100%; - ширина страницы

Вот и все. Теперь можете посмотреть на результат в браузере. Надеюсь, что у вас все получилось.

Таким же способом вы можете зафиксировать положение практически любого блока на html-странице.

Вот такое интересное свойство есть у стилей CSS. Используйте его по назначению на благо своего дела.

Больше моих уроков по Javascript здесь.

Комментарии