Прижать footer бывает не такой легкой задачей, с которой сталкиваются веб-разработчики в процессе создания сайта. Чаще всего они приходят к различным костылям, которые в самый неподходящий момент имеют свойство падать. Парадокс в том, что есть готовое решение, которое подойдет любому проекту, о котором мало кто знает.
На самом деле, каждый верстальщик встречался с проблемой, которая чаще всего встаёт уже ближе к завершению создания первой страницы сайта. Когда всё казалось бы идеально и никаких проблем не предвещает — футер всегда испортит картину. При чём, в зависимости от разных задач, возлагаемых на footer, он всё равно будет работать не так, как хотелось бы. Если проблемы внутри него можно решить, не потратив много времени, но вот с позиционированием его часто встречаются проблемы, которые требуют не понятно чего.
Проблемы, которые возникают у футера сайта, имеют такие неприятные особенности, как:
- footer не прижимается к низу страницы;
- footer «отлипает» от низа страницы, при наличие небольшого наличия контента;
- footer «прилипает» к странице контента, в следствие чего образуется «пустырь» в самом низу страницы.
Все эти проблемы встречались верстальщикам и находили свои решения, но общего, увы, мало кто мог предоставить. Давайте разберемся, как правильно прижать footer к низу страницы с помощью CSS и сформулировать общие правила при его создании.
Для начала создадим типичную структуру самого простого сайта:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="page"> <div class="header"> <!-- Содержимое шапки --> </div> <div class="content"> <!-- Содержимое области контента --> </div> <div class="footer"> <!-- Содержимое футера --> </div> </div> |
Классическая структура:
- page — весь документ я объединил в один блок, на деле можете использовать любой другой, если это может нарушать какие-либо правило или структуру документа;
- header — шапка сайта, в которой часто содержится меню, логотип и прочее;
- content — область контента (информация, которая содержится на странице);
- footer — наш подвал сайта, в котором часто содержится копирайт, логотип, контакты, меню.
После того, как документ готов — можно переходить, непосредственно, к заданию правил для наших элементов с помощью CSS3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
html, body { height: 100%; } .page { min-height: 100%; position: relative; } /* Правила для шапки */ .header { background: #AB1857; height: 70px; } /* Правила для контента */ .content { padding-top: 30px; padding-bottom: 50px; } /* Правила для подвала сайта */ .footer { position: absolute; bottom: 0; width: 100%; height: 120px; /* Высота блока footer */ background: rgba(14,14,14,0.95); } |
Таким образом, мы получаем универсальное правило для того чтобы прижать footer к низу страницы, при любых случаях. Как видно из примера, для его создания не требуется большое количество правил и не составляет большого труда. Давайте выделим ключевые моменты в правилах, которые необходимо применить вам:
- height: 100% для html, body. С помощью этого мы даём указания браузеру, что страница должна располагаться на всю высоту;
- padding-bottom для контента. Таким образом мы задаём отступ от футера;
- position: absolute. С помощью него мы задаем абсолютную позицию футеру, не зависящую от других блоков;
- bottom: 0. Обнуляем отступ снизу;
- width: 100%. Задаём ширину футера по всей ширине страницы;
- height: 120px. Задаём высотку блока подвала;
Остальные правила я написал для наглядности, так как большая часть из них у вас скорей всего уже должна быть. Примечательно то, что данные правила подходят для больших экранов, если вы создаете адаптивный сайт, то советую ознакомиться с такой полезной вещью, как MediaQueries. В связке с ним у вас получится великолепно реализованный футер для сайта, который будет отличаться своей простотой и функциональностью.
