Как сделать footer css

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

Есть основной блок <div > с контентом различной высоты, а под ним размещён футер.

Если контент не достигает всей высоты экрана, нужно чтобы минимальная высота .container занимала свободное место окна браузера. При этом футер должен быть внизу страницы и оставаться видимым.

Футер может менять высоту, но при этом он должен оставаться прижатым к нижнему краю окна браузера.

Для прижатия футера к низу экрана, есть несколько решений. От самого актуального до устаревшего:

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции "Flexbox для Internet Explorer 10/11".

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для 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 ) чтобы избежать нежелательного "сжатия".

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента:

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для 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 и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

Создание футера для сайта-одностраничника

Создание футера для сайта-одностраничника

Здравствуйте, это финальный урок из серии обучающих материалов по созданию одностраничника.

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

В футере, как правило, располагается информация о копирайте, контактные данные, ссылки на социальные сети.

В нашем футере будет только копирайт и контактная информация &#8212; номер телефона и электронная почта.

  1. Размещение футера.
  2. Стилизация блока &#8212; создание фона и общих размеров.
  3. Стилизация отдельных элементов &#8212; текст с информацией о копирайте и контактная информация(цвет, шрифт и размещение).

HTML разметка футера

Открываем наш HTML документ и перемещаемся в самый низ, то тега <footer>. В нем и будет располагаться весь контент футера.

Создаем 3 блока p. В первом будет указан E-Mail администрации. Во втором будет расположен номер телефона, а в третьем информация о копирайте.

Для каждого из них нужно задать селекторы, в нашем случае селекторы классов. Для номера и почты задаем класс <contacts>, а для копирайта &#8212; <copyright>.

После этого можно открывать CSS документ и записывать туда все необходимые стили.

Стилизация блока

  1. &#8212; Footer &#8212; основной тег-контейнер.
  2. &#8212; .contacts &#8212; класс параграфов с контактной информацией.
  3. &#8212; .copyright &#8212; класс параграфа с текстом о копирайте.

Для начала нужно задать фон и разметку самого футера. Ширину задавать не требуется, так как она равна ширине общего блока body, однако необходимо указать высоту.

Цвет фона должен отличаться от фона других блоков. Это необходимо для привлечения внимания клиентов.

  1. <Background> &#8212; используется для создания фона.
  2. <Height> &#8212; используется для определения высоты.

Стилизация внутренних элементов

После того как мы задали цвет фона, нам необходимо расположить элементы. Контактная информация будет располагаться с правой стороны, поэтому свойство text-align не потребуется.

Всё что нам потребуется &#8212; изменение шрифта и цвета текста.

Информация о копирайте будет располагаться в нижней части футера. Он будет отделен особой тонкой рамкой.

Для его стилизации потребуются свойства изменения цвета, стиля шрифта и размера шрифта.

  1. <Color> &#8212; изменение цвета текста.
  2. <Font-style> &#8212; изменение стиля шрифта.
  3. <Border-top> &#8212; создание рамки по верхней границе.
  4. <Padding> &#8212; Внутренние отступы.
  5. <Margin> &#8212; внешние отступы.

Для изменения размера шрифта будет использоваться всеми любимая система шрифтов:

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

В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).

Трава отображается поверх границы

Рис. 6.10. Трава отображается поверх границы

Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).

Висящий подвал

а. Висящий подвал

Подвал прижат к краю

б. Подвал прижат к краю

Рис. 6.11. Разновидности подвала

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

Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0 .

Рисунок с травой специально выполнен узким и имеет высоту 27 пикселов, что явно недостаточно для высоты нашего подвала, поэтому дополним рисунок тем же фоновым цветом #e2ed9c. Для этого добавим слой с именем footer-bg и для него укажем необходимый цвет фона.

Код HTML будет простым.

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

Здесь к ширине контента ( width ) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin , добавляемого к селектору P . Код для создания подвала и текста:

Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег <img> , а чтобы управлять его положением поместим рисунок в <div> с классом lion . Впрочем, этот класс можно также установить напрямую тегу <img> . Окончательный код нашего подвала представлен в примере 6.16.

Пример 6.16. Код подвала

Положение льва укажем с помощью позиционирования. Для этого родительскому элементу <footer> следует указать свойство position как relative , а элементу lion как absolute . В таком случае свойства left и top управляют координатами относительно родителя, т.е. <footer> . Однако здесь есть одна сложность, <footer> занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50% , что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.

Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.

Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.

К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto . Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.

Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.

Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.

Стиль для подвала приведён в примере 6.17.

Пример 6.17. Стиль подвала

Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY . Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.

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

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