Подвал сайта в html: Прижатый подвал, 5 способов | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

— HTML | MDN

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

Категории контента	Основной поток, явный контент.
Разрешённое содержимое	Контент основного потока, кроме `<footer>` и `<header>`.
Пропуск тега	Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешённые родительские элементы	Любой элемент, который разрешает Контент основного потока в качестве содержимого. Обратите внимание, что элемент `<footer>` не должен быть потомком элемента `<address>`, `<header>` или другого элемента `<footer>`.
Разрешённые ARIA роли	`group`, `presentation`
DOM-интерфейс	`HTMLElement`

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

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

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

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

WebKit Bugzilla: 146930 — AX: Нативные элементы HTML (header, footer, main, aside, nav) должны работать также, как ориентиры ARIA, но иногда они этого не делают

Specification
HTML Standard # the-footer-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Связанные с этим разделом элементы: <body>, <nav>, <article>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <header>, <section>, <address>;
Разделы и структура документа HTML5.
ARIA: роль contentinfo (en-US)

Last modified: 30 нояб. 2022 г., by MDN contributors

Как сделать подвал сайта статичным? — Хабр Q&A

1. z-index не должен быть отрицательным — именно из-за этого ссылки не работают. В принципе, z-index для подвала вообще не нужен, но если делаешь, то только положительным.

2. Нужно не position: absolute, а position: fixed. Тогда подвал всегда будет прижиматься к низу экрана.

В общем, что-то вроде:

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.content { /* основное содержимое сайта */
  margin-bottom: 120px; /* высота подвала */
}
.content:after { /* не обязательно - только чтобы дополнительные div'ы с clear: both не вставлять */
  content: "";
  height: 0px;
  display: block;
  margin: 0px;
  padding: 0px;
  clear: both;
}
.footer { /* собственно подвал, расположенный сразу за . content */
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 120px;
}

Если же ты хочешь, чтобы контент наползал на подвал, то вот такой вариант. Там главное — чтобы подвал в тексте стоял выше контента и чтобы у контента было position: relative. Никаких z-index’ов…

И, разумеется, у наползающего контента снизу должен быть margin, а не padding.

Ответ написан более трёх лет назад

Здравствуйте!

В предыдущего блока margin-bottom должен быть в высоту подвала. А еще лучше все предыдущие блоки поместить в враппер, в котором margin-bottom в высоту подвала. Предыдущий блок должен иметь clear:both; А вообще было бы удобнее если бы Вы показали где получается, а где нет.

Ответ написан 2014, в 21:15″> более трёх лет назад

сверстай примерно так:

< div>
< div>
< div>ШАПКА< / div>
< / div>

< div>
< div>ТЕЛО< / div>
< / div>

< div>
< div>ПОДВАЛ< / div>
< / div>
< / div>

Кстати, зачем индекс отрицательный? Не надо так, потому футер и не видно!

Ответ написан более трёх лет назад

Подсмотрите решение здесь. Это Bootstrap и в нем есть элемент Navbar, который можно прицепить либо в топ, либо в низ страницы. По сути используется свойство position:fixed. Посмотрите, как реализовано это в CSS и смело копируйте.

Ответ написан 2014, в 23:15″> более трёх лет назад