Прижать footer бывает не такой легкой задачей, с которой сталкиваются веб-разработчики в процессе создания сайта. Чаще всего они приходят к различным костылям, которые в самый неподходящий момент имеют свойство падать. Парадокс в том, что есть готовое решение, которое подойдет любому проекту, о котором мало кто знает.
На самом деле, каждый верстальщик встречался с проблемой, которая чаще всего встаёт уже ближе к завершению создания первой страницы сайта. Когда всё казалось бы идеально и никаких проблем не предвещает — футер всегда испортит картину. При чём, в зависимости от разных задач, возлагаемых на footer, он всё равно будет работать не так, как хотелось бы. Если проблемы внутри него можно решить, не потратив много времени, но вот с позиционированием его часто встречаются проблемы, которые требуют не понятно чего.
Проблемы, которые возникают у футера сайта, имеют такие неприятные особенности, как:
Все эти проблемы встречались верстальщикам и находили свои решения, но общего, увы, мало кто мог предоставить. Давайте разберемся, как правильно прижать footer к низу страницы с помощью CSS и сформулировать общие правила при его создании.
Для начала создадим типичную структуру самого простого сайта:
<div class="page">
<div class="header">
<!-- Содержимое шапки -->
</div>
<div class="content">
<!-- Содержимое области контента -->
</div>
<div class="footer">
<!-- Содержимое футера -->
</div>
</div>
Классическая структура:
После того, как документ готов — можно переходить, непосредственно, к заданию правил для наших элементов с помощью CSS3:
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 к низу страницы, при любых случаях. Как видно из примера, для его создания не требуется большое количество правил и не составляет большого труда. Давайте выделим ключевые моменты в правилах, которые необходимо применить вам:
Остальные правила я написал для наглядности, так как большая часть из них у вас скорей всего уже должна быть.
Как только высота подвала становится "плавающей" то подвал становится поверх контента. Вариант плохой
Егор, можно добавить padding-bottom равный высоте подвала для .page, чтобы это место не занимал контент
хрень какую то написал.... Мог бы сразу сказать, что это не работает, и не тратить время людей.....
сколько воды, боже...
Автор ответа не захлебнулся там в своей же воде?
Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.
ах если бы всё так просто было
Лепим футер к низу на 0px, а перед ним подставляем нужной высоты блок, чтобы прокручивался до конца контент...
<div class="otstup"></div>
<div class="lepim"></div>
.otstup{padding-bottom: 50px;float:center;width:100%;height:50px;background:none;}
.lepim{position: fixed; bottom: 0; float:center;width:100%;height:50px;}
Футер же залазить на контент будет :/