В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).
Рис. 6.10. Трава отображается поверх границы
Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).
а. Висящий подвал
б. Подвал прижат к краю
Рис. 6.11. Разновидности подвала
В действительности прижимать подвал к нижнему краю не придётся, достаточно заполнить пустое пространство под подвалом тем же цветом, что и у травы. За счёт такого трюка будет создаваться впечатление, что подвал занимает всё оставшееся пространство.
Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0 .
Рисунок с травой специально выполнен узким и имеет высоту 27 пикселов, что явно недостаточно для высоты нашего подвала, поэтому дополним рисунок тем же фоновым цветом #e2ed9c. Для этого добавим слой с именем footer-bg и для него укажем необходимый цвет фона.
.footer-bg < background: #e2ed9c; /* Цвет фона */ >
Код HTML будет простым.
Ширина этих слоёв явно не указана, поэтому она занимает всю доступную ширину, так что текст будет выравниваться по левому краю. Необходимо ограничить текст нашим макетом, для этого включим дополнительный слой copyright и для него укажем ширину и выравнивание по центру.
.copyright < width: 740px; /* Ширина макета без полей */ padding: 0 10px 10px; /* Поля */ margin: auto; /* Выравнивание по центру */ color: #526118; /* Цвет текста */ >.copyright p < margin: 0 0 5px 170px; /* Отступы текста */ >
Здесь к ширине контента ( width ) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin , добавляемого к селектору P . Код для создания подвала и текста:
Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег , а чтобы управлять его положением поместим рисунок в с классом lion . Впрочем, этот класс можно также установить напрямую тегу . Окончательный код нашего подвала представлен в примере 6.16.
Пример 6.16. Код подвала
Положение льва укажем с помощью позиционирования. Для этого родительскому элементу следует указать свойство position как relative , а элементу lion как absolute . В таком случае свойства left и top управляют координатами относительно родителя, т.е. . Однако здесь есть одна сложность, занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50% , что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.
footer < position: relative; /* Относительное позиционирование */ >.lion < position: absolute; /* Абсолютное позиционирование */ left: 50%; /* По центру */ margin-left: -347px; /* Сдвигаем влево */ top: 3px; /* От верхнего края */ >
Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.
Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.
К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto . Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.
Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.
.footer-bg
Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.
.content-white < padding: 20px 40px 80px; /* Поля */ >
Стиль для подвала приведён в примере 6.17.
Пример 6.17. Стиль подвала
footer < background: url(images/grass.png) 50% 53px no-repeat; /* Фоновый рисунок травы */ margin-top: -77px; /* Поднимаем вверх */ overflow: auto; /* Отменяем схлопывающиеся отступы */ position: relative; /* Относительное позиционирование */ >.lion < position: absolute; /* Абсолютное позиционирование */ left: 50%; /* По центру */ margin-left: -347px; /* Сдвигаем влево */ top: 3px; /* От верхнего края */ >.footer-bg < background: #e2ed9c; /* Цвет фона подвала */ margin-top: 80px; /* Сдвигаем вниз */ >.copyright < width: 740px; /* Ширина макета без полей */ padding: 0 10px 10px; /* Поля */ margin: auto; /* Выравнивание по центру */ color: #526118; /* Цвет текста */ >.copyright p < margin: 0 0 5px 170px; /* Отступы текста */ >
Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY . Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.
body < background: #e2ed9c; /* Цвет фона подвала */ >
Как сделать подвал на сайте в 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
Смотрите также
Found a content problem with this page?
Edit the page on GitHub.
Report the content issue.
View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
Как создать фиксированный footer с помощью CSS: инструкция с примерами и полезные советы
Чтобы пользователь быстро находил нужную информацию и легко шёл по маркетинговой карте к заказу, у сайта должен быть привычный, интуитивный дизайн. Например, внизу странички человек обычно находит ссылки на социальные сети, контакты, политику в отношении обработки персональных данных и т.д.
В этой статье мы расскажем, как зафиксировать подвал сайта HTML . Разберём несколько способов с простыми примерами.
Что такое footer страницы
Footer сайта — это нижняя часть сайта, которая содержит дополнительную информацию и элементы навигации. Обычно footer или подвал находится внизу каждой страницы и простирается по всей ее ширине. Он является важной частью веб-дизайна, так как предоставляет полезные дополнительные данные, позволяя посетителям легко ориентироваться на сайте.
Основная функция футера состоит в том, чтобы предоставить пользователям быстрый доступ к важным разделам и контактным данным, что облегчает связь с посетителями. Часто в footer входят различные элементы, такие как логотип компании или названия авторских прав, которые устанавливают атмосферу сайта и делают его более профессиональным.
Footer CSS может быть разделен на несколько столбцов, каждый из которых содержит свою информацию. Такой подход особенно удобен для сайтов с большим объемом контента и множеством разделов, поскольку позволяет организовать информацию и сделать её более доступной для пользователей.
Кроме того, подвал часто используется для размещения ссылок на другие ресурсы компании, например, на блог, форум или онлайн-магазин. Это помогает привлечь посетителей к дополнительной активности и стимулирует их участие на сайте.
В целом, footer является важным элементом веб-страницы, который обеспечивает корректную навигацию и удобство использования для посетителей. Он помогает создать полноценное впечатление о сайте и организовать информацию таким образом, чтобы пользователи могли легко находить нужные им данные.
У начинающих разработчиков возникает вопрос, как сделать footer внизу страницы HTML. Проще всего это сделать с помощью CSS.
Что такое CSS
Cascading Style Sheets или сокращённо CSS – это язык стилей, который используется разработчиками веб-сайтов для оформления и визуализации содержимого. Он позволяет создавать уникальный и красивый дизайн, облегчая тем самым восприятие информации пользователем.
Одной из главных особенностей CSS является его каскадность. Это означает, что стили могут быть применены к элементам веб-страницы на разных уровнях: от атрибутов отдельных тегов до глобальных правил, которые могут затрагивать все элементы на странице. Кроме того, CSS предоставляет возможность наследования стилей от родительских элементов к дочерним, что упрощает задание стилей для всего сайта.
С помощью CSS можно изменять цвета и фоны, шрифты и размеры текста, межстрочное расстояние, отступы, выравнивание и многое другое. Ключевым преимуществом CSS является возможность разделения оформления и содержания веб-страницы. Таким образом, CSS позволяет легко изменять внешний вид веб-сайта, не затрагивая его структуру и содержимое.
CSS обладает множеством возможностей для создания интересного и современного дизайна веб-сайта. Он поддерживает анимацию, трансформацию элементов, плавные переходы и многое другое. Благодаря медиазапросам, CSS также позволяет создавать адаптивные веб-страницы, которые автоматически меняют свой внешний вид в зависимости от размеров экрана устройства, на котором они отображаются.
Таким образом, CSS является мощным инструментом, который позволяет визуально трансформировать веб-сайты, придавая им индивидуальность и профессиональный вид. Он приносит простоту и возможность быстро вносить изменения в стили, что делает его незаменимым инструментом в руках каждого веб-разработчика.
5 способов зафиксировать HTML footer
При работе с HTML и CSS важно понимать, что у кода при любом выбранном способе будет идентичная структура, разница лишь в CSS-коде.
Ниже представлены HTML примеры.
Вытягивание блоков.
Наша задача – вытянуть родительские блоки html, body и .wrapper на 100%.
В блоке .content необходимо указать нижний отступ. Чтобы он не перекрывал часть экрана, он должен быть равен высоте экрана или чуть больше него.
Код будет выглядеть так.
Прижатый подвал, 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).
Оба метода требуют дополнительных ненужных элементов HTML.
Способ 3. Использование calc() для уменьшения высоты обёртки
Один из способов не включать лишние элементы — это отрегулировать высоту обёртки с помощью calc() (пример 3). Тогда никакого перекрытия не будет, просто два элемента складываются друг с другом на общую высоту 100%.
Обратите внимание на 70px в calc() и фиксированную высоту подвала 50px. Можно предположить, что в содержимом у последнего элемента margin-bottom равен 20px. Именно это значение нужно сложить с высотой подвала, чтобы полученную сумму вычесть из высоты области просмотра. И да, мы используем единицы vh как небольшой трюк, чтобы не устанавливать 100% у body и обёртки.
Способ 4. Использование флексбоксов
Большая проблема у перечисленных трёх методов состоит в том, что они требуют подвала фиксированной высоты, а это довольно неприятно. Содержимое может измениться. Элементы гибкие. Фиксированная высота — опасная территория. Использование флексбоксов для прижимания подвала не только не потребует дополнительных элементов, но и позволяет установить подвал произвольной высоты (пример 4).
Вы можете даже добавить заголовок выше или ниже материала. Вот пара хитростей.
flex: 1 для дочернего элемента, который будет расти для заполнения пространства (содержимое в нашем случае).
или margin-top: auto , чтобы сдвинуть дочерний элемент от соседа (или другой margin , в зависимости от направления).
Помните, у нас есть полное руководство по флексбоксам.
Способ 5. Использование Grid
Разметка с помощью Grid более новая (и менее поддерживаемая), чем флексбоксы. У нас есть также по нему есть полное руководство. Вы также можете довольно легко использовать Grid для прижимания подвала (пример 5).
(3).png)
.jpg)
(1).jpg)