Вход / Регистрация

Статьи

Как прижать футер к низу страницы

02 сентября 2018
Владимир Першин

Всем привет!

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

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

Скорей всего, ваш шаблон Joomla уже имеет какие-то файлы JS. поэтому нужный код для прижатия футера вы можете вставить в один из них.

if ($(document).height() <= $(window).height()) {
	$(".footer").addClass("navbar-fixed-bottom");
}

Во второй строке вы можете увидеть, что мы добавляем нужный класс к элементу с классом "footer". Если футер вашего сайта имеет другой класс, то конечно вам необходимо вписать именно его!

Если вы решили создать отдельный файл JS и подключить его к вашему шаблону, тогда используйте следующий код:

jQuery(function($){
	if ($(document).height() <= $(window).height()) {
		$(".footer").addClass("navbar-fixed-bottom");
	}
});

После того, как нужный код был добавлен, вы наверняка заметили, что ваш футер был прижат к низу страницы, и теперь ваш сайт стал выглядеть ещё лучше!

Отзывы

Комментарии (2)

  • Иван

    09.10.2018 |
    Иван
    А класс navbar-fixed-bottom - это самописный класс или стандартный?

    Ответить

    • Владимир Першин

      10.10.2018 |
      Владимир Першин
      Это стандартный класс Twitter Bootstrap 3

      Ответить

2018-09-02 10:56:16
Владимир Першин
Украина, г. Николаев
+380937417200