Как сделать footer

Как сделать footer

Тег задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Синтаксис

Атрибуты

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
Персональный сайт Кристины Ветровой
 
 
Добро пожаловать!
 
Рада приветствовать вас на своем сайте.
 
   

Результат данного примера показан на рис. 1.

Рис. 1. Подвал сайта

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER .

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Статьи по теме

• Блочная вёрстка
• Новые теги
• Подвал страницы
• Пять вещей, которые надо знать об HTML5
• Что всё это значит?

Как с помощью CSS прижать footer к низу окна браузера

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

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

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

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

* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer

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

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

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

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

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

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

* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content

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

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

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

* < margin: 0; padding: 0; >.content

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

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

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

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

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

Смотрите также

FireFox и вертикальное выравнивание текста в input[submit]

67 комментариев

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

10 фиксов, решающих проблемы Internet Explorer 6

58 комментариев

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью .

Верстаем кроссбраузерный «резиновый» макет страницы

25 комментариев

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

Цвет курсора в поле input и кроссбраузерность

28 комментариев

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

Как сделать footer

Как прижать подвал сайта (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

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

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

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

Благодаря свойству 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

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

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

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

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

 * < margin: 0; padding: 0; >.content

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

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

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

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

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

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

Урок 7. Создание Футера сайта

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

Запишем после текстовых блоков следующий код:

Главная | Рейтинги | Статьи | Аналитика | Электронные услуги |

Copyright © 2012. Сайт об электронном правительстве