1 124 Бывают такие проекты, когда требуется, чтобы подвал сайта был приклеен к низу окна браузера.
В этой статье мы покажем вам, как это можно сделать на чистом CSS или с помощью jQuery.
Реализация с помощью CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
* { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ |
|
1 2 3 4 5 6 |
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div> |
Реализация с помощью jQuery
Достаточно проконтролировать, чтобы #footer был последним видимым элементом на странице.
|
1 2 3 |
<div id="footer"> Sticky Footer </div> |
Устанавливаем высоту подвала.
|
1 |
#footer { height: 100px; } |
Принцип работы скрипта заключается в следующем. Когда загружается, изменяется или прокручивается окно браузера, скрипт все время сверяет размеры контента с размерами окна. Если высота контента меньше высоты окна, тогда подвал позиционируется в нижней части окна браузера, как только условие меняется, позиционирование становится статичным.
|
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 31 32 |
$(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() { footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document.body).height()+footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).animate({ top: footerTop }) } else { $footer.css({ position: "static" }) } } $(window) .scroll(positionFooter) .resize(positionFooter) }); |
Вот и все. Если вы хотите что-то добавить или поправить, то смело оставляйте комментарии, мы обязательно рассмотрим ваши предложения.
Пример не работает, если контент на странице динамический. Например аякс или ява скрипт фильтр стоит. При загрузке страницы все расчитывается правильно, затем используя фильтр, часть данных удаляется и страница становится маленькая, в итоге футер ползет вверх и получается посередине экрана. Виндов.ресайз или .скролл в этом случае не срабатывает. Было бы удобно еще использовать функцию БОДИ.ресайз, но как это сделать, я ХЗ. Это баг меня преследует повсюду