Сайт

Футер для сайта html: Тег | htmlbook.ru

06.08.2023

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

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с 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 — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Дока Дог советует
Авторы:
  • org/Person» itemprop=»author»> Алёна Батицкая
Редакторы:
  • Ольга Алексашенко
Редактировать на GitHub

Обновлено

Кратко

Скопировано

<footer> создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.

Пример

Скопировано

В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:

<article>  <h2>Бигфут</h2>  <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p>  <footer>    <p>Ольга Сасквоч</p>    <p>Почта: <a href="mailto:[email protected]">[email protected]</a>.</p>  </footer></article>
          <article>
  <h2>Бигфут</h2>
  <p>Бигфут (от англ.  Bigfoot, «большеногий») — название полумифического млекопитающего...</p>
  <footer>
    <p>Ольга Сасквоч</p>
    <p>Почта: <a href="mailto:[email protected]">[email protected]</a>.</p>
  </footer>
</article>
Открыть демо в новой вкладке

Как понять

Скопировано

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

В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.

<footer> может быть не только у всего сайта целиком, но и у отдельного блока или секции.

Как пишется

Скопировано

Тег <footer> парный, должен всегда закрываться </footer>.

Атрибуты

Скопировано

Применяются все глобальные атрибуты.

Подсказки

Скопировано

💡 У <footer> блочные стили по умолчанию 🤓

💡 Нельзя вкладывать в <address>, <header> или другой <footer>.

💡 Контакты и информацию об авторе стоит поместить в контейнер <address>, а его добавить в <footer>.

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 У <footer> особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer>, чтобы поисковик понял, что находится в этом блоке.

Оценка материала

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

<header>

ctrl + alt + ←

Следующий материал

→

<main>

ctrl + alt + →

Нижний колонтитул HTML: пошаговое руководство

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

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

Здесь на помощь приходит тег HTML