Прижать футер к низу страницы средствами JavaScript ver. 2.0

Самый простой способ прижать футер к низу страницы используя JavaScript

На самом деле все очень просто! Сразу скажу, что использую JQuery.

function footerToBottom() {
var browserHeight = $(window).height(),
footerOuterHeight = $('#footer').outerHeight(true),
mainHeightMarginPaddingBorder = $('#main').outerHeight(true) - $('#main').height();
$('#main').css({
'min-height': browserHeight - footerOuterHeight - mainHeightMarginPaddingBorder,
});
};
footerToBottom();
$(window).resize(function () {
footerToBottom();
});

А теперь по порядку. Сперва мы создаем функцию, в которой получаем высоту рабочей области браузера, далее вычисляем высоту футера со всеми марджинами, паддинами и бордерами, вычисляем высоту всех марджинов, паддингов и бордеров у контейнера #main. Теперь, когда все данные у нас в переменных, задаем контейнеру #main минимальную высоту, за счет которой я и прижимаю футер к низу. Следом сразу запускаю функцию footerToBottom(); и, очень важно, ставлю обработчик события на окно браузера-изменение размера, и по нему тоже запуская функцию footerToBottom();

Не забываем о Jquery, это все можно было написать и начистом JS конечно, но код был бы гораздо длинней.

Все гениальное-просто!

Demo

8 комментариев: Прижать футер к низу страницы средствами JavaScript ver. 2.0

  1. Да, скрипт отличный вот только он вычисляет как будто высоту окна монитора, а не браузера. В итоге появляется скролл.

  2. admin

    все нормально, скролла нет.
    Demo

  3. Да, вижу у Вас все хорошо. Скорее всего он у меня почему то футер ниже экрана ставит где то на 50px. Почему он так высчитывает понять пока не могу.

  4. admin

    ссылку в студию!

  5. Вот
    И, кстати, не против если я у себя размещу статью с ссылкой на эту?

    ЗЫ думаю «Вы комментируете слишком быстро. Попридержите коней» настроен слишком жестко)). Я же вчера только комментировал.

  6. http://adshi.krakoss.ru/ == а не подскажите что не так в моей разметке чтобы убрать полосу прокрутки
    Заранее спасибо
    Юрий

  7. изменил код
    min-height’: browserHeight – footerOuterHeight – mainHeightMarginPaddingBorder – 25,
    и все работает

  8. urli9

    ПАСИБО! очень ХОРОШИЙ и ПРОСТОЙ скрипт!!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


3 + два =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте.