Два способа сделать футер страницы «липким» (Sticky Footer)

Фев 1, 2018 | Блог | 0 comments

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

Sticky Footer Before

Конечно, можно расширить страницу до необходимой высоты при помощи различных «распорок» типа невидимых дивайдеров, пустых разделов, изображений — но это не реальное решение проблемы. Что если не вы, а ваш клиент будет наполнять страницы контентом. Необходим другой метод.

Существует несколько способов решения этой проблемы с использованием средств CSS или JavaScript. Рассмотрим пару из них. Способ с использованием CSS выглядит попроще, но метод JavaScript более функционален.

 

1. Создание «липкого» футера при помощи CSS

Несколько строчек простого кода CSS заставят подвал страницы быть всегда прижатым к нижнему краю экрана.

1
2
3
4
5
#main-footer {
   position: fixed;
   bottom: 0;
   width: 100%;
}

Основным недостатком этого способа является то, что остается на своем месте всегда, даже при прокрутке длинных страниц и съедает ценное пространство (особенно на маленьких экранах смартфонов и планшетов). Поэтому, применять это решение можно только на отдельных страницах, контент которых заведомо не будет увеличен в будущем.

И конечно, этот метод совсем не подходит для создания страниц и постов вашими клиентами не обладающими навыками вебразработчика.

Здесь нужно более универсальное решение. И это решение может дать использование JavaScript.

 

2. Создание Sticky Footer с помощью JS

Код, представленный ниже, разработал Луис Алехандре, владелец  сайта Divi4u.com. Этот скрипт, в зависимости от ситуации делает футер «липким» на неполных страницах и обычным для страниц с достаточной длиной.

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
<script type="text/javascript">
(function($) {
    var $footer = $('#main-footer');
    if ($footer.length) {
        var footer_height = $footer.height();
        $(window).on('load resize', function() {
            var available_height = $(window).height() - footer_height,
                $main_content = $('#main-content'),
                $admin_bar = $('#wpadminbar'),
                $top_header = $('#top-header'),
                $main_header = $('#main-header');
 
            if ($admin_bar.length) {
                var available_height = available_height - $admin_bar.height();
            }
 
            if ($top_header.length) {
                var available_height = available_height - $top_header.height();
            }
 
            if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
                var available_height = available_height - $main_header.height();
            }
 
            if (available_height > $main_content.height()) {
                $main_content.height(available_height);
            }
        });
    }
})(jQuery);
</script>

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

Sticky Footer After

Теперь нужно добавить этот код на все страницы сайта. В консоли вордпресс переходим в раздел Divi->Theme Option на вкладку Integration. Здесь вставляем скопированный код в поле <body> (good for tracking codes such as google analytics). Предварительно убедитесь что переключатель Enable body code находится в положении Enabled (Включено).
Вставляйте код именно в поле  <body> — это важно. Если вы добавите код в секцию <head>, скрипт не будет работать правильно.

Для тех, кто не желает возиться с вставкой кода, автор создал плагин Divi Quasi-Sticky Footer. Его можно скачать отсюда.