Как закрепить footer внизу страницы html
Перейти к содержимому

Как закрепить footer внизу страницы html

  • автор:

Как закрепить footer внизу страницы html

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

Интерактивный пример

Категории контента Основной поток, явный контент.
Допустимое содержимое Контент основного потока, кроме и .
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который разрешает Контент основного потока в качестве содержимого. Обратите внимание, что элемент не должен быть потомком элемента , или другого элемента .
Допустимые ARIA-роли group (en-US) , presentation (en-US)
DOM-интерфейс HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

  • Заключите информацию об авторе в элемент , который может быть добавлен в элемент .
  • Элемент не относится к секционному контенту, а значит не создаёт новый раздел в структуре HTML-документа.

Примеры

footer> Какая-то информация об авторском праве или может информация об авторе статьи? footer> 

Проблемы доступности

У программа чтения с экрана VoiceOver есть проблема, при которой она не читает элемент (не добавляет роль-ориентир элемента в список ориентиров). Чтобы решить эту проблему добавьте role=»contentinfo» в элемент .

Спецификации

Specification
HTML Standard
# the-footer-element

Совместимость с браузерами

BCD tables only load in the browser

Как прижать footer к низу страницы

Прижатие footer к низу страницы

Курс по созданию сайтов

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

  • при помощи свойства display: flex;
  • с помощью позиционирования;
  • с помощью единиц измерения vh;
  • при помощи создания дополнительного блока.

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

     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

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

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

     Document  

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

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

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

Очень познавательная статья.
Благодарю автора. Я встречал еще и другие способы прижатия футера к низу экрана. Думаю, стоило бы их описать здесь тоже.

Как прижать footer к низу экрана?

Есть основной блок

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

.container
  
header
content
footer

Отслеживать
7,319 5 5 золотых знаков 28 28 серебряных знаков 71 71 бронзовый знак
задан 20 июл 2016 в 7:47
747 1 1 золотой знак 6 6 серебряных знаков 10 10 бронзовых знаков
Пробовали использовать media queries? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
20 июл 2016 в 9:35
Возможный дубликат вопроса: Подвал не фиксированной высоты прижатый к низу экрана
20 июл 2016 в 9:54
Это дубликат вопроса, а не наоборот.
6 янв 2017 в 15:55

я так понимаю, что у Вас должен контент постоянно меняться, в зависимости от выбранных вкладок в каком-то меню. Я тоже сталкивался с моментами, когда нужно было, чтоб футер четко был внизу при , практически пустом контенте (даже немного скролил). Я такой момент решал бонально просто: в своем файле css я ставил .content < min-height: 600px; >( ну или 500-700px в зависимости от того какой высоты у Вас хедер, просто просчитываете контент). Я не говорю, что это решение оригинальное, но в своих проектах я его использовал и мне это не доставляло неудобств в дальнейшем.

9 апр 2017 в 19:22

9 ответов 9

Сортировка: Сброс на вариант по умолчанию

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

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

html < height: 100%; >body < margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; >header < background: blue; >main < background: red; >footer
 
header
content
footer

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: flex; flex-direction: column; min-height: 100vh; >header < background: blue; >main < /* Чтобы занимал оставшееся пространство */ flex-grow: 1; background: red; >footer < /* Чтобы footer не уменьшался */ flex-shrink: 0; background: black; >
 
header
content
footer

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

body < margin: 0; color: #fff; display: table; min-height: 100vh; width: 100%; >header < background: blue; >main < display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; background: red; >footer
 
header
content
footer

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

// Высчитываем высоту footer и делаем соответствующий отступ от main: function footer() < const main = document.getElementsByTagName('main')[0], footer = document.getElementsByTagName('footer')[0] main.style.paddingBottom = footer.clientHeight + 'px' >window.addEventListener('load', footer); window.addEventListener('resize', footer);
html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; background: black; >
 
header
content
footer

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer и header */ min-height: calc(100vh - 30px - 18px); background: red; >footer < /* Высота footer */ height: 30px; background: black; >
 
header
content
footer

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

html < /* Растягиваем документ на всю высоту окна */ height: 100%; >body < position: relative; margin: 0; color: #fff; /* Растягиваем body по высоте html */ min-height: 100%; >header < background: blue; >main < /* Выставляем отступ с высотой footer */ padding-bottom: 30px; background: red; >footer < /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 30px; background: black; >
 
header
content
footer

Отслеживать
ответ дан 2 янв 2017 в 11:11
MobiDevices.com MobiDevices.com
7,319 5 5 золотых знаков 28 28 серебряных знаков 71 71 бронзовый знак

Если надо чтобы решение на Flexbox работало в IE, то я у себя в ответе в секции Internet Explorer есть решение.

27 мая 2018 в 19:47

Также приведенное решение на CSS Grid Layout негибкое (требует фиксированной высоты) и не работает в IE 10/11, что исправлено в моём ответе.

27 мая 2018 в 20:08

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

body < min-height: 100vh; margin: 0; display: flex; flex-direction: column; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >
 
header
content
footer

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

  • min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.
  • Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; >
 
header
content
footer

Если надо чтобы был отступ от контента:

body < height: 100vh; margin: 0; display: flex; flex-direction: column; >header, footer < flex-shrink: 0; >.content < border: 1px dotted red; >footer < /* Опустить в самый низ */ margin-top: auto; >
 
header
content
footer

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

body < min-height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; >.content < /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ align-self: start; border: 1px dotted red; >
 
header
content
footer

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >
 
header
content
footer

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

body < height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк, разные имена свойств */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; >.content < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ -ms-grid-row-align: start; align-self: start; border: 1px dotted red; >footer < /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; >.content < -ms-grid-row: 2; border: 1px dotted red; >footer
 
header
content
footer

Отслеживать
ответ дан 2 янв 2017 в 12:26
Vadim Ovchinnikov Vadim Ovchinnikov
9,634 4 4 золотых знака 35 35 серебряных знаков 73 73 бронзовых знака

Можно ещё так, с проверкой (если мало контента, то фиксировать, иначе статика):

if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.

FOOTER
if( $(document).height()
.page-footer < padding: 1rem; background: #333; color: #fff; text-align: center; >.page-footer.fixed-bottom
  

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.

FOOTER

Прижимаем футер к низу страницы

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

Простейшая html разметка:

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

Способ #2

Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

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

Способ #3

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

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

Способ #4

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

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

Способ #5

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

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

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *