Как сделать подвал в css
Перейти к содержимому

Как сделать подвал в css

  • автор:

Как сделать подвал в html

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

Пример кода для создания простого подвала:

     Контактная информация: phone@mail.ru Авторские права © 2023   

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

Фиксированный подвал

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

Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).

Пример 1. Фиксированный подвал

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Фиксированный подвал    

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

Подвал внизу страницы

Рис. 1. Подвал внизу страницы

Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами , вложив их внутрь контейнеров content и footer , а также включить еще один стиль специально для этого браузера (пример 2).

Пример 2. Код с учетом IE6

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Фиксированный подвал  


Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Параллакс подвал

Параллакс подвал

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

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

Прижатый подвал, 5 способов

Смысл прижатого подвала заключается в том, что он «прилипает» к нижней части окна браузера. Но не всегда; если на странице достаточно содержимого, чтобы сдвинуть подвал вниз, то это будет сделано. Если содержимого на странице мало, тогда подвал прижмётся к нижней части окна браузера.

Способ 1. Отрицательный margin-bottom для обёртки

Мы используем элемент .wrapper , в который помещаем всё, за исключением подвала. Затем устанавливаем для обёртки отрицательный margin-bottom , равный высоте подвала (пример 1).

Пример 1. Использование отрицательного margin-bottom

    Подвал html, body < height: 100%; margin: 0; >.wrapper < min-height: 100%; /* Равно высоте подвала, */ /* но с учётом margin-bottom у последнего дочернего элемента */ margin-bottom: -50px; >.footer, .push  

Нам потребуется дополнительный элемент внутри области содержимого ( .push ), он гарантирует что отрицательный margin не потянет подвал вверх и не перекроет собой содержимое. У .push , скорее всего, нет своего отрицательного margin , поэтому использование сдвига оправданно. Если это не так, то надо учесть значение в отрицательных margin и скоординировать два числа, чтобы выглядело хорошо.

Способ 2. Отрицательный margin-top у подвала

Данный метод не требует использования элемента .push , вместо этого нужно обернуть содержимое в дополнительный элемент, к которому следует применить соответствующий padding-bottom . Это делается, опять же, для того, чтобы избежать поднятия подвала над любым содержимым из-за отрицательного margin-top (пример 2).

Пример 2. Использование отрицательного margin-top

    Подвал html, body < height: 100%; margin: 0; >.content < min-height: 100%; >.content-inside < padding: 20px; padding-bottom: 50px; >.footer  

Оба метода требуют дополнительных ненужных элементов HTML.

Способ 3. Использование calc() для уменьшения высоты обёртки

Один из способов не включать лишние элементы — это отрегулировать высоту обёртки с помощью calc() (пример 3). Тогда никакого перекрытия не будет, просто два элемента складываются друг с другом на общую высоту 100%.

Пример 3. Использование calc()

    Подвал .content < min-height: calc(100vh - 70px); >.footer  

Обратите внимание на 70px в calc() и фиксированную высоту подвала 50px. Можно предположить, что в содержимом у последнего элемента margin-bottom равен 20px. Именно это значение нужно сложить с высотой подвала, чтобы полученную сумму вычесть из высоты области просмотра. И да, мы используем единицы vh как небольшой трюк, чтобы не устанавливать 100% у body и обёртки.

Способ 4. Использование флексбоксов

Большая проблема у перечисленных трёх методов состоит в том, что они требуют подвала фиксированной высоты, а это довольно неприятно. Содержимое может измениться. Элементы гибкие. Фиксированная высота — опасная территория. Использование флексбоксов для прижимания подвала не только не потребует дополнительных элементов, но и позволяет установить подвал произвольной высоты (пример 4).

Пример 4. Использование flex

    Подвал html, body < height: 100%; >body < display: flex; flex-direction: column; >.content < flex: 1 0 auto; >.footer  

Вы можете даже добавить заголовок выше или ниже материала. Вот пара хитростей.

  • flex: 1 для дочернего элемента, который будет расти для заполнения пространства (содержимое в нашем случае).
  • или margin-top: auto , чтобы сдвинуть дочерний элемент от соседа (или другой margin , в зависимости от направления).

Помните, у нас есть полное руководство по флексбоксам.

Способ 5. Использование Grid

Разметка с помощью Grid более новая (и менее поддерживаемая), чем флексбоксы. У нас есть также по нему есть полное руководство. Вы также можете довольно легко использовать Grid для прижимания подвала (пример 5).

Пример 5. Использование grid

    Подвал body < margin: 0; >html < height: 100%; >body < min-height: 100%; display: grid; grid-template-rows: 1fr auto; >.footer  

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

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