Главная→Мотоблоки→Как сделать прижатый к низу футер. Фиксированный подвал

Как сделать прижатый к низу футер. Фиксированный подвал

Одним из основных правил вёрстки является прижатие footer к низу html-страницы, вне зависимости от размера основного контента. Существует множество способов это сделать. В данной теме мы рассмотрим несколько популярных способов как прижать footer к низу страницы:

Сначала создадим структуру html-документа. Все содержимое тега body нужно обернуть в общий div (в данном примере

). А весь основной контент обернуть в отдельный div, не включая footer (в данном примере

Document

Как прижать footer к низу страницы при помощи свойства display: flex

Этот способ я использую чаще всего. Он достаточно быстрый, простой и не требует задавать footer значение фиксированной высоты. Данное свойство уже стало поддерживаться большинством браузеров, поэтому можно использовать для кроссбраузерной вёрстки.

Html, body { height: 100%; } .container { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; } footer { }

Как прижать footer к низу страницы с помощью позиционирования

html, body { height: 100%; } .container { position: relative; min-height: 100%; } .content { padding-bottom: 100px; /*отступ должен равняться высоте footer*/ } footer { position: absolute; width: 100%; height: 100px; /*обязательно нужно задать фиксированное значение высоты*/ }

Применяя данный способ, вам придётся задать footer фиксированное значение высоты, иначе он закроет часть контента, что может быть неудобным для адаптивной вёрстки.

Прижатие футера к низу страницы используя единицы измерения vh

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Данные единицы поддерживаются только современными браузерами.

Перед применением лучше проверить в сервисе: https://caniuse.com/#search=calc .

Content { min-height: calc(100vh - 100px); /*100vh - это высота окна браузера, 100px - высота footer*/ } footer { height: 100px; }

Прижатие футера к низу экрана путём создания дополнительного блока

Этот способ предполагает создание дополнительной html-конструкции. Потребуется новый контейнер div. Обратите внимание, что блоку с селектором класса content задается отрицательный margin по размеру высоты дополнительного блока.

Document

CSS-код в данном случае будет иместь следующий вид:

Html, body { height: 100%; } .container { min-height: 100%; } .content { margin-bottom: -50px; /*отступ равен высоте дополнительного блока*/ } .delimiter { height: 50px; } footer { }

С уважением, Павлова Наталья

Как прижать футер к низу страницы ? Этот вопросом задаются многие, кто сталкивался с версткой макетов для сайта. Дело в том, что если высота блоков в этих макетах не указана явно, то она зависит от количества их содержимого, соответственно, если этого содержимого достаточно мало, то весь макет может занимать высоту меньше чем окно браузера. Естественно выглядит все это не очень красиво. Сейчас я покажу вам несколько способов, которые позволят прижать футер к нижней части страницы и таким образом сделать макет более привлекательным и привычным.

В каждом из примеров будем отталкиваться от того, что макет сайта имеет такую обычную структуру (ваш макет может отличаться, но способы универсальные):

Контент

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

Прижать футер к низу с помощью позиционирования

сайт - прижимаем футер к низу, используя позиционирование

Контент

Описание примера

Все блоки макета были заключены в дополнительный блок-обертку id= "wrapper" , которому задали минимальную высоту (свойство CSS ) равную 100%, чтобы он растянулся во всю высоту окна браузера, но если потребуется, то мог тянуться и дальше. Однако так как процентные значения считаются относительно предка, то чтобы все сработало, пришлось явно указать высоту (CSS ) для тегов и .
Следующим шагом стало абсолютное позиционирование (CSS ) футера относительно оберточного блока к его нижней стороне (CSS ). Таким образом, футер у нас оказался прижат к нижней части страницы.
Так как абсолютное позиционирование вырывает элемент из потока, то при добавлении информации в блоки с контентом и меню, часть ее будет уходить под прижатый футер. Чтобы этого не произошло, элементам id= "content" и id= "menu" были установлены нижние внутренние отступы (CSS ) равные высоте футера. Теперь именно они будут уходить под футер и толкать его вниз.
Так как у нас в макете блок с меню является плавающим (CSS ), то футер все равно его не будет замечать, а, соответственно, меню не будет толкать его вниз. Для исправления этого был создан еще один блок (class= "clear" ), который прерывает обтекание (свойство CSS ). Кстати, если вы не планируете осуществлять поддержку IE6 и IE7, то можете вместо этого блока применить к последнему блоку перед футером (здесь это "content" ) псевдоэлемент и просто у него сделать прерывание обтекания.

В первом пункте было применено свойство CSS для указания минимальной высоты, которое не понимает Internet Explorer 6. Зато он понимает свойство как раз как минимальную высоту. Также этот браузер в определенных случаях игнорирует правило . Эти его две особенности и были использованы в данном примере для создания хака , чтобы заставить его делать то, что надо, не затрагивая другие браузеры.

Прижать футер к низу с помощью дополнительных блоков

сайт - прижимаем футер к низу, используя дополнительные блоки

Контент

Описание примера

Все блоки макета кроме футера были обернуты в дополнительный блок id= "wrapper" , которому была задана минимальная высота (CSS ) в 100%. Это было сделано для того, чтобы блок-обертка как минимум вытянулся во всю высоту окна браузера, но при необходимости (если содержимого будет много) мог тянуться и дальше. Теперь высота нашей обертки стала равна высоте окна браузера, а высота всей HTML-страницы = высота обертки + высота футера.
В результате действий первого пункта наш футер хоть и прижался к низу страницы, но ушел за нижнюю границу окна браузера, что не хорошо. Чтобы поднять его в зону видимости, для него было задано верхнее отрицательное поле (CSS ) размер которого равен высоте самого футера. Все, футер прижат и находится внизу страницы.
Так как в предыдущем пункте у прижатого футера мы указали верхнее отрицательное поле, то при добавлении информации в блоки с контентом или меню, часть ее будет уходить под этот футер. Чтобы этого избежать был создан еще один блок с id= "footer_correct" , высота которого равна (можно сделать даже чуть больше) высоте футера. Таким образом, именно этот корректирующий блок будет уходить под прижатый футер и толкать его вниз, предотвращая скрытие информации.
Корректирующему блоку было добавлено прерывание обтекания (CSS ), чтобы он не обтек меню, если оно будет превышать высоту контента. Соответственно у самого футера это прерывание обтекания было убрано за ненадобностью.

Как и в первом примере, для IE6 здесь был применен специальный хак, позволяющий задать ему минимальную высоту.

Tutorial

Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, 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:

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

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

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

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

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

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

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

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

...Верхний блок рекламы...

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

Какие видим недостатки вёрстки в плане реализации эффекта прибитого футера? Видим, что
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){ //блок-выравниватель

в футере 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 -
$("

").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 (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться. Добавить метки

Не так давно меня попросили показать, как прижать футер к низу . Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.

Допустим, есть такой HTML-код :

Чтобы прижать футер к низу , надо применить к данному HTML-коду следующий CSS-код :

Html {
height: 100%;
}
body {
height: auto !important; //Обязательно, если контента в main будет много
height: 100%;
min-height: 100%;
}
#main {
padding-bottom: 50px;
}
#footer {
bottom: 0;
height: 50px;
position: absolute;
}

Здесь всё прозрачно, но скажу только, что строчка "height: auto !important; " позволяет учитывать то, что если контента в main будет больше, чем высота страницы, то высота будет больше, чем 100% . Без неё подвал просто налезет на контент и всегда будет находиться в одном и том же месте.

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

Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

Делаем правильный футер для своего сайта

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

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

Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }

Для того чтобы приклеить подвал к низу страницы тег