• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Прижимаем подвал "footer" к низу странице сайта (Как прижать footer к низу окна браузера с помощью jQuery)
Прижимаем подвал "footer" к низу странице сайта
Kosten
Дата: Среда, 2018-10-31, 19:47 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


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

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



Где изначально вычисляем или высчитываем самую оптимальную высоту блока, который идет с контейнером (#cont) где используется высота самого окна и аналогично с высотой шапки (#head) и самого подвала (#foot).

jQuery

Код
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


Подключаем jQuery, не вставляем эту строчку, если jQuery уже подключено!

Код
<script type="text/javascript">
$(window).load(function(){ // вешаем скрипт на load ибо при ready chrome криво достаёт размеры
var hh = $('#head').height(); // берем высоту шапки и суем в переменную hh
var fh = $('#footer').height(); // то же самое с подвалом
var wh = $(window).height(); // высота всего окна
var сh = wh - hh - fh; // считаем оптимальную высоту для блока с контентом
$('#cont').css('min-height', сh); // применяем посчитанную высоту
});
</script>


На этом почти все, но если у вас имеются блоки, это помимо самого верха и подвала, то аналогично выставляем высоту, что вычисляем ее их высоты самого окна.

PS - В комментариях пишут, что способ не сильно правильный, то актуален, если вам нужно быстро прижать футер.
Прикрепления: 5418827.png(20.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Прижимаем подвал "footer" к низу странице сайта (Как прижать footer к низу окна браузера с помощью jQuery)
  • Страница 1 из 1
  • 1
Поиск: