Chrome Chrome  Microsoft edge
Развернуть

Прибитый к низу футер своими руками. Как с помощью CSS прижать footer к низу окна браузера Что такое footer в html

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

Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS .

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

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

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html , body и.wrapper) на 100%. При этом контентному блоку.content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

* { margin: 0; padding: 0; } html, body, .wrapper { height: 100%; } .content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .footer { height: 80px; margin-top: -80px; }

Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом.content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: table; height: 100%; } .content { display: table-row; height: 100%; }

Здесь мы эмулируем поведение таблицы, превратив блок.wrapper в таблицу, а блок.content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку.content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

* { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); }

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh , вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc() , поддержка единицы измерения vh .

Пятый способ (самый актуальный)

Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; min-height: 100%; } .content { flex: 1 0 auto; } .footer { flex: 0 0 auto; }

Узнать про поддержку браузерами свойства flex можно .

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

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

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

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

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

Какие проблемы возникли с нашим макетом сайта

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

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

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

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

Заголовок

Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы

А в файле Style.css были прописаны следующие CSS свойства:

Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }

Ну, а сам макет выглядел примерно так:

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

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

Body, html { margin:0px; padding:0px; height: 100%; }

На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.

Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

Заголовок

Левая колонка Меню Меню Меню Меню
Содержимое страницы Содержимое страницы Содержимое

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

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

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{ background-color:#FFC0FF; clear:both; height: 50px; }

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

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

Вставляем распорку и боремся с Internet Explorer

Но возникает проблема , которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

Заголовок

Левая колонка Меню Меню Меню Меню
Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы

А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka { height: 50px; }

В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

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

Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

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

* html #maket { height: 100%; }

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce - завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, креатива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.

Читайте также: 13 маркетинговых трендов в электронной коммерции 2019 года

Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.

Время просмотра (сек.) / Расстояние от верха страницы (пиксели)

Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.

Доля посетителей (%) / Расстояние от верха страницы (пиксели)

Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).

Исследование развеивает миф о том, что пользователи не прокручивают страницу до самого низа и не смотрят весь контент. Футер также важен для современного eCommerce сайта, даже имеет свои преимущества.

Идеи как оформить «подвал» (футер), примеры продающих дизайнов

Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.

1. Необходимая информация

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

  • Отметки о копирайте
  • Правовые оговорки
  • Биллинговая информация
  • Уведомление об использовании файлов cookie

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

Пример footer’a: Ив Роше

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

Пример footer’a: Lumity

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

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

Пример footer’a: Saddleback Leather Co

Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается

2. Негативное пространство – достаточность визуальной дистанции

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

Пример footer’a: QUAY AUSTRALIA

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

Пример footer’a: Incase

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

Пример footer’a: Stumptown Coffee Roasters

Просторный футер кофейного сайта - отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями)

3. Завершающий призыв к действию

Читайте также: 30+ примеров и идей оформления кнопок целевого действия

Стильное оформление футера красноречиво говорит о самом ресурсе. Важно заметить: покупатель задерживается здесь чуть дольше, чем в остальных частях страницы. Удобным случай для еще одного, завершающего призыва к действию . Часто это подписка/рассылка, но можно связать СТА-призыв и с регистрацией аккаунта.

Пример footer’a: Greetabl

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

Пример footer’a: Ecwid

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

4. Плавающая корзина – повышение доступности продающего функционала

Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.

Пример footer’a: Lemonadela

Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя

5. Навигация в футере

Нижняя часть сайта идеально подходит для не часто просматриваемой информации: о компании, условиях предоставления услуг и политики конфиденциальности. В этом случае функция футера – всех спасти. Чувствуя себя потерянным в eCommerce среде, кто-то начинает интересоваться инфраструктурой электронного магазина, инстинктивно прокручивая дальше…

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

В HTML5 для структуры кода введено несколько новых тегов:

,