Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с 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> header </header> <div> content </div> <footer> footer </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> header </header> <div> content </div> <footer> footer </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> header </header> <div> content </div> <footer> footer </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> header </header> <div> content </div> <footer> footer </footer>
Случай с контентом на всю оставшуюся высоту:
body { height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; } .content { border: 1px dotted red; }
<header> header </header> <div> content </div> <footer> footer </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> header </header> <div> content </div> <footer> footer </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> header </header> <div> content </div> <footer> footer </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 { -ms-grid-row: 3; }
<header> header </header> <div> content </div> <footer> footer </footer>
— HTML — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Подсказки
- На практике
- Дока Дог советует
- Авторы:
- org/Person» itemprop=»author»> Алёна Батицкая
- Редакторы:
- Ольга Алексашенко
Обновлено
Кратко
Скопировано<footer>
создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.
Пример
СкопированоВ нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:
<article> <h2>Бигфут</h2> <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p> <footer> <p>Ольга Сасквоч</p> <p>Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.</p> </footer></article>Открыть демо в новой вкладке<article> <h2>Бигфут</h2> <p>Бигфут (от англ.
Bigfoot, «большеногий») — название полумифического млекопитающего...</p> <footer> <p>Ольга Сасквоч</p> <p>Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.</p> </footer> </article>
Как понять
СкопированоКак правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.
В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
<footer>
может быть не только у всего сайта целиком, но и у отдельного блока или секции.
Как пишется
СкопированоТег <footer>
парный, должен всегда закрываться <
.
Атрибуты
СкопированоПрименяются все глобальные атрибуты.
Подсказки
Скопировано💡 У <footer>
блочные стили по умолчанию 🤓
💡 Нельзя вкладывать в <address>
, <header>
или другой <footer>
.
💡 Контакты и информацию об авторе стоит поместить в контейнер <address>
, а его добавить в <footer>
.
На практике
СкопированоДока Дог советует
Скопировано🛠 У <footer>
особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer>
, чтобы поисковик понял, что находится в этом блоке.
Если вы нашли ошибку, отправьте нам пулреквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
Предыдущий материал←
<header>
ctrl + alt + ←
Следующий материал→
<main>
ctrl + alt + →
Нижний колонтитул HTML: пошаговое руководство
Тег нижнего колонтитула HTML определяет нижний колонтитул для веб-страницы или раздела. Нижние колонтитулы обычно содержат контактную информацию, ссылки на важные страницы веб-сайта и автора веб-страницы.
При создании веб-страницы вы можете решить добавить нижний колонтитул. Например, предположим, что вы создаете сайт для местной кофейни. Вы можете добавить нижний колонтитул с названием, контактной информацией и часами работы кофейни.
Здесь на помощь приходит тег HTML