Прибитый к низу футер своими руками

Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social/ — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.

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

Посмотрим на реализацию одного вида прибитого футера, взятого из сети, и попробуем разобраться в происходящем. css-tricks.com/snippets/css/sticky-footer/
CSS:

* { 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 */

HTML:

<div id="wrap">
	<div id="main" class="clearfix">

	</div>
</div>
<div id="footer">

</div>

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

Начнём с теории

Обычная реализация прибитого футера основывается на том уникальном для CSS2 свойстве, что элементы — непосредственные потомки BODY — поддерживают процентную высоту (height:100% или другую) относительно окна, если все их родители имеют тоже процентную высоту, начиная с тега HTML. Раньше, без доктайпов, а сейчас в Quirks Mode процентные высоты элементов поддерживаются на любом уровне, а в современных доктайпах — только на первом после BODY. Поэтому, если мы сделаем блок контента (назовём его #layout), имеющий 100% высоты, он будет иметь скролл, как будто это — окно. В него помещают всё (потоковое) содержание, кроме футера и, может быть, хедера.

Футер помещают вслед за этим блоком и делают ему 0 пикселей высоты. Вообще, можно вслед за #layout поставить сколько угодно блоков, но все они должны быть или с 0 пикселей высоты, или вне потока документа (не position: static). И есть ещё один важный фокус, которым обычно пользуются. Не обязательно делать высоту, равную 0. Можно сделать высоту фиксированной, но из основного блока вычесть её за счёт свойства margin-bottom: -(высота);.

Говоря человеческим языком, стилями делается пустой «карман» снизу, в который вкладывается футер, и он всегда оказывается или прилепленным к нижней границе окна, или к нижней границе документа, если документ по высоте больше высоты окна. По интернету и на Хабре существует множество реализаций футера, с разной успешностью работы во всех браузерах. Продолжим строить его самостоятельно, используя вёрстку Хабра как «рабочую лошадку».

Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. Плюс ко всему, надо обеспечить невылезание под границу блока плавающих элементов, что делается, например, блоком

<div class="clear"></div>

, где .clear{clear:both}. Важно, чтобы или эта "высота" была фиксированной, или в тех же относительных единицах, или мы её вычисляли бы в процессе изменений страницы. Обычно удобно совместить этот выравнивающий блок с установкой для него требуемой высоты.

Посмотрим на строение страниц нашего подопытного. Для этого проще всего раскрыть окно Firebug или подобное окно («Инструменты разработчика» (Ctrl-F12)) в Chrome.

<!DOCTYPE html>
<html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<body>
		<div id="topline">...Верхний блок рекламы...</div>
		<div id="layout">
			<div id="header">
			<div class="content_left">...===Содержимое страницы===...</div>
			<div class="sidebar_right">...Правый сайдбар...</div>
			<div class="clear"></div> <!--выравниватель вёрстки-->
			<div class="rotated_posts">...Блок</div>
			<div id="footer">
				<dl class="user">..<dl><!--вот он, футер-->
				<dl>...<dl>
				<dl>...<dl>
				<dl>...<dl>
				<dl>...</dl>
				<div class="copyright">...</div>
			</div>
		</div>
		<div id="AutocompleteContainter_ea125"></div> <!--разные плавающие элементы-->
		<div class="token-input-dropdown-hubs"></div>
		<div id="tiptip_holder" style="max-width:300px;">
		<div id="jGrowl" class="top-right jGrowl">
	</body>
</html>

Перейдём к рабочему примеру

Какие видим недостатки вёрстки в плане реализации эффекта прибитого футера? Видим, что
1) футер на сайте находится внутри блока с id=layout, который не имеет процентной высоты. По теории, ему, родителям и блоку содержания .content-left требуется поставить высоту 100%. С последним возникают проблемы — он для такого не приспособлен. Следовательно, не хватет одного прослоечного блока или футер находится не на том уровне. Кроме того,
2) высота футера переменная (зависит от числа элементов в списке и от размера шрифта, это видно не из HTML, а из CSS). И
3) над #layout имеется рекламный блок фиксированной высоты 90px;
4) выравнивающих блоков нет ни в футере, ни (вообще говоря) в блоке #layout (есть, но над блоком .rotated_posts; впрочем, возможно, его надо отнести к футеру).

Пункт 4 — придётся прорисовывать скриптом.
C третьим пунктом разобраться, казалось бы, просто, добавив

#layout{margin-top:-90px;}

Но вспомним, что этого блока может не быть — он подавляется баннерорезкой, или рекламщики его вдруг решат не показывать. Есть ряд страниц сайта, где его нет. Поэтому зависимость margin-top от рекламного блока — плохая идея. Гораздо лучше — разместить его внутри #layout — тогда он ничем не будет мешать.

Первый пункт — чтобы прибитый футер вообще заработал, надо блок футера поместить под #layout. Впрочем, с помощью javascript можно реализовать и другие схемы прибитого футера, но в любом случае нужен JS или изначально правильная вёрстка, чтобы обойтись без него.

Поскольку мы не можем быть сильнее самого последнего верстальщика сайта, «влепившего» футер внутрь содержания, отложим идею правильного размещения футера на свой будущий сайт (который, стало быть, будет «круче» !), а Хабр препарируем джаваскриптом (юзерскриптом) до правильного состояния. (Сразу скажем, виноват не верстальщик, не стрелочник, а вид сайта, конечно, определяет стратегическое решение руководства проекта.) Так мы не достигнем идеала, потому что в первую секунду-две в процессе загрузки страница будет с неправильной вёрсткой. Но для нас важен концепт и возможность превзойти по качеству самый популярный сайт мира айтишников.

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

var dQ = function(q){return document.querySelector(q);} //для сокращения
var topL = dQ('#topline'), lay = dQ('#layout'), foot = dQ('#footer');
if(topL && lay) //баннер - внутрь блока контента
  lay.insertBefore(topL, lay.firstChild);
if(lay && foot && lay.nextSibling) //перенос футера
  lay.parentNode.insertBefore(footer, lay.nextSibling);

Расставили блоки по местам — теперь осталось приписать элементам нужные свойства. Высоту футера придётся задавать точно, просто потому что мы её уже знаем к моменту действия юзерскрипта (конец загрузки страницы). Из-за точки срабатывания юзерскрипта, как уже говорилось выше, прыжок отображения футера на странице неизбежен. Можно пытаться делать «хорошее лицо», но при «плохой игре»? Зачем? «Плохая игра» сайта позволяет сделать без сверхусилий концепт, которого будет достаточно для оценки качества и не понадобится при «правильной игре» на своём проекте.

if(foot){ //блок-выравниватель <div class="clear"></div> в футере
  h.apnd_el({clss:'clear', appendTo: footer});
  var footH = foot.offsetHeight; //...и измеряем высоту футера
}
if(topL && lay && footer && lay.nextSibling){
  //выравнивающий блок нужной высоты в контенте ("лейауте")
  h.apnd_el({clss:'clear', css:{height: (footH ||0) +'px'}, appendTo: lay});
  lay.style.minHeight ='100%';
  h.addRules('#layout{margin-bottom:-'+ footH +'px!important}html, body {height:100%}');
}

Здесь позволили себе применить самописную функцию h.apnd_el, делающую примерно то же, что и в jQuery —

$('<div class="clear"></div>').css({height: footH ||0}).appendTo($(footer))

И далее — ещё одна типичная функция внедрения правил CSS — h.addRules. Здесь без неё не обойтись, потому что нужно объявить правило с "!important" — как раз из-за особенностей приоритетов стилей из юзерскрипта.

С этими кусочками кода мы сможем увидеть в юзерскрипте прибитый футер (после прыжка его вниз) и полностью осознать, как надо строить вёрстку страниц. Использовать прыгающий дизайн повседневно — неприятно, поэтому рекомендуется его сделать исключительно для демонстрации и тестирования. В юзерскрипте HabrAjax я установил аналогичный скрипт, закрыв его настройкой «underFooter» (установить «галочку» в списке настроек перед «прибитый к низу футер»), начиная с версии 0.883_2012-09-12.

Затрагивает ли прибитый футер необходимость обновления стилей ZenComment, если они установлены? Да, затрагивает. Из-за сложной цепочки приоритетов стилей, в которых стили, вставляемые юзерскриптом, имеют низший приоритет, пришлось немного подкорректировать юзерстили для возможности работы с прибитым футером. Если вы не обновите юзерстили (до 2.66_2012-09-12 +) — футер будет работать неточно.

Блок rotated_post (три популярных поста из прошлого) логичнее смотрится при футере, поэтому в реальном скрипте он тоже перенесён в футер.

Второй пункт (из списка недостатков вёрстки) — рассуждения чисто для Хабра (к юзерскрипту не относятся и частично повторяют прежние).

У страниц имеется проблема, мешающая сделать прибитый футер на чистом CSS — неопределённая высота футера, зависящая от размеров шрифта по умолчанию в браузере. Для реализации футера на CSS требуется подобрать относительные высоты шрифтов, но и они могут не сработать, если на компьютере пользователя не будет предусмотренных шрифтов. Поэтому решение должно включать джаваскрипт, который может подгонять переходами (transitions) приблизительное положение футера до точного. Или, посмотрев на приемлемость сделанного решения на юзерскрипте на разных платформах, сделать вычисляемую установку прибитого футера — первые наблюдения показывают, что решение практично.

Вывод: полноценно оформить раскладку на Хабре можно, но для этого нужен верстальщик, чётко понимающий поведение раскладки, располагающий блоки в правильном порядке. (Сейчас футер и верхний баннер стоят «не там» и не так, чтобы просто стилями получить прибитый футер.) Можно обойтись без JS, если задать высоту футера в относительных единицах, взяв некоторый запас места на неопределённость шрифта.

Реализация

Если включить HabrAjax 0.883+, то увидим работу «прибитого футера». Он адаптируется по высоте с помощью скриптов. Он позволяет оценить, насколько лучше выглядят страницы с прибитым футером по сравнению с обычными. Юзерстили ZenComment совместимы со скриптами, но для правильной работы прибитого футера с ними нужно установить версию ZenComment 2.66_2012-09-12 +.

Факты о поведении реализации

Шаманство с футером, стилями и скриптами — это шаманство (лишь подкрепляемое теорией). В разных браузерах немного разное поведение, но кое-где — неожиданное. Без юзерскриптов и переставления блоков результаты будут другие. Вот что дали эксперименты с реализацией на юзерскрипте.

1) Firefox — неожиданное отсутствие прыжков футера. Странно, что их нет — отрисовка происходит после размещения футера внизу.

2) Chrome — он удивил «блуждающим скроллом» — к странице с периодом раз в секунду добавляются пустые пространства внизу — что-то неправильное происходит с расчётом высот. Лечится прописыванием html,body{height:100%} в юзерстили, но без гарантий, что всегда будет работать. Надёжнее — проверять, не превышает ли документ окно по высоте, и если не превышает, то двигать футер, иначе — ничего. С прыганием — всё в порядке, оно есть.

3) Опера — без прыжков (v. 12.02) при первой загрузке страницы, но поспешная перезагрузка может показать прыжок футера. В остальном ведёт не менее корректно, чем Fx.

Что же, придётся специально приучить Хром вести себя правильно (скриптом) и в таком виде выкатить версию на обозрение. Поэтому участок в юзерскрипте немного сложнее, чем приведённый в статье.

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

В итоге, получилась вполне работоспособная схема работы, по крайней мере, для быстрых стационарных компьютеров. Если обнаружится неправильное поведение футера, настройку «underFooter» нужно отключить.

Для каких страниц это полезно?

На стандартном сайте, без юзерстилей даже короткие страницы вопросов-ответов оказываются длиннее 1500px, что в большинстве случаев незаметно при горизонтально расположенных мониторах. Но даже при обычных мониторах часто попадаются персональные страницы пользователей высотой порядка 1300 пикселей, где неприбитый футер предстаёт во всей красе. Не очень длинен и ряд страниц в настройках пользователя.

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

Будет ли поддержка?

Поведение сайта за последний год показывает, что разработчики (а значит, руководство) начали внедрять возможности, ранее существовавшие только в юзерскриптах и юзерстилях. Например, в начале года я написал статью-обзор по юзабилити Хабра, где собрал множество небольших пожеланий. Через полгода я вернулся к ней и с удовлетворением пометил (прямо в тексте; можно ознакомиться с «UPD» и датами), что целый ряд возможностей, описанных как пожелания, уже были внедрены в сайт.

Далее, посмотрим на «стрелочки» вместо квадратиков для оценивания комментариев. Они появились в юзерсилях almalexa («Prettifier») года 3 назад и переняты в ZenComment года 2 назад. Месяца 2-3 назад они появились на сайте. Начинает вериться в то, что через некоторое время стрелки разнесут на некоторое расстояние, как это сделано в ZenComment (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться.

Поэтому, возможно, и «прибитый футер» на Хабре — это не такая фантастика, какой могла показаться года 3 назад.

Другие возможности в скрипте HabrAjax, появившиеся за последние 3 месяца (отключаемы в настройках):
* авторост полей ввода (в Опере может тормозить на больших текстах);
* дни недели при датах, кроме «сегодня» и «вчера»;
* события в Ленте, сворачиваемые до 1 строки и 2 символов;
* сокращение слов «хабр*» до "χ·" и "χα";
* подсказки дат по номерам статей — сообщается, какого месяца и года статья до её загрузки, по номеру в URL;
* свёрнуты «Похожие посты» до 2 слов. Скриншот всплывающих «похожих постов» (показывает 12 ссылок, а не 4).

Автор: spmbt