CSS Sticky Footer / Прилипающий футер / Хабрахабр

Как использовать прилипающий футер


Введение


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



Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.



Прилипающий футер, представленный здесь, основан на информации, полученной из статьи Изучаем футеры на List Apart, а так же дополненной материалом Кэмерона Адамса и вот этим кусочком с lwis.net. Он использует clearfix-хак, чтобы держать футер на своем месте в Google Chrome и других браузерах, где он может «всплыть» наверх при изменение размеров окна. Так же этот хак позволяет избежать проблем, если вы используете float для создании двух- или трехколоночных макетов. Мы протестировали его более чем в 50 браузерах, и работает он отлично.



HTML-код


Ниже представлена простейшая структура HTML-кода. Вы уже наверно заметили, что <div> с футером находится снаружи оберточного <div>’а.



<div id="wrap">



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



  </div>



</div>



<div id="footer">



</div>





Содержимое вашей страницы можно расположить внутри <div>’а main. Например, для двухколоночного макета код будет таким:



<div id="wrap">



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



    <div id="content">



    </div>



    <div id="side">



    </div>



  </div>



</div>



<div id="footer">



</div>





Шапку можно расположить внутри wrap, но снаружи main

<div id="wrap">



  <div id="header">



  </div>



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



  </div>



</div>



<div id="footer">



</div>


Если вам захочется поместить какие-нибудь элементы вне этих блоков, то придется заморачиваться с абсолютным позиционированием и вычислением 100%-ной высоты.



CSS-код


Ниже — CSS-код, прижимающий футер к низу:



html, body, #wrap {height: 100%;}body > #wrap {height: auto; min-height: 100%;}#main {padding-bottom: 150px;}  /* отступ должен быть равен высоте футера */#footer {position: relative;margin-top: -150px; /* отрицательное значение высоты футера */height: 150px;clear:both;} 


Значение высоты футера использовано здесь трижды. Важно, чтобы везде оно было одинаковым. Свойства height растягивают оберточный <div> по высоте на весь размер окна. Отрицательный отступ футера размещает его внутри отступов main-<div>’а. Посколько main находится внутри wrap, высота отступов уже включена в вышеописанную 100%-ную высоту. Таким образом футер остается в низу страницы.

Но это еще не все — надо назначить clearfix-свойства main-<div>’у.



Clearfix-хак спешит на помощь


Много CSS-дизайнеров уже знакомы с Clearfix-хаком. Он решает довольно много проблем с плавающими элементами. Здесь мы используем его, чтобы прибить футер в Google Chrome. Так же он избавит нас от проблем с «всплытием» футера в ситауции, например, когда в макете из двух колонок контент флоатится в одну сторону, а сайдбар в другую.

Поэтому добавляем в стили это:



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




Даже если вы используете метод Райана Фэйта с лишним <div>’ом, придется применять этот хак для многоколоночных макетов.



Известные проблемы


Высота и поля


Если использовать вертикальные отступы внутри некоторых элементов, это может толкнуть футер вниз на расстояние этих отступов, в шапке, например, или даже в wrap или main. Вместо полей снаружи (margins) лучше использовать отступы внутри (padding). Вы можете заметить, что содержимого на странице не так уж и много, а футер уползает за границы окна и появляется вертикальная полоса прокрутки: проверьте, нет ли где margin’ов, и замените их на padding.

Будьте внимательны при объявлении отступов для main<div>’а в разных местах. Если хочется добавить что-то вроде padding:0 10px 0 10px;, будьте осторожны — это может переопределить отступы внизу, которые должны быть строго определенной величины, контент может пойти поверх футера на длинных страницах (в Google Chrome).



Размеры шрифтов


Устанавливая размер шрифтов в относительных величинах, помните, что пользователи могут увеличивать их. В некоторых элементах, хотя бы даже в футере, это может испортить настройки высоты и получится разрыв, если тексту не хватает места. Используйте абсолютные величины (pt или px), или просто сделайте футер побольше.



Платформа .NET


При разработке сайтов на ASP.net, где каждая страница находится внутри <form>, не забудьте добавить height:100% для form, например так:



html, body, form, #wrap {height: 100%;}




UPD от переводчика. Считаю нужным прояснить для вас, господа, несколько моментов:

1. Это топик-перевод. Все вопросы и возмущения по поводу методов можете направить автору, его зовут Стив Хэтчер, ссылка прилагалась с самого начала

2. По-поводу IE-Mac, неработы в Хроме и прочего: ребята, неизвестно когда писался этот метод, но он обновлялся и пересматривался, а кроме этого он работает в подавляющем большинстве браузеров. «Не работает в Хроме» может значить, что футер уплывал куда-то в ранних билдах этого браузера. Ну и что, что у вас стоит последний апдейт? Есть люди, которые браузер не обновляют просто потому, что не знают о такой возможности, или просто не видят необходимости в этом. Вам хуже станет от того, что этот способ работает везде? Ну правда?

3. pt vs. em vs. px vs. %. Используйте у себя на сайте что хотите. Автор предложил ДВА метода решения проблемы с разъезжающимися пропорциями, вам никто не запрещает и не навязывает использовать любой из них. Мы все здесь не маленькие и знаем, что такое хорошо, а что такое плохо.

http://habrahabr.ru/post/66805/

Губарь Маргарита Александровна