Как создать фиксированный footer с помощью CSS
При помощи HTML и CSS можно создать много разных эффектов для сайта. Один из самых простых примеров — это фиксация элемента в любой части страницы при скроллинге. В этой статье мы расскажем, что собой представляет футер и как его зафиксировать без JavaScript. Также рассмотрим footer HTML примеры.
Что такое footer
Футер — это объект, который находится внизу сайта. Иногда такой элемент закрепляют на странице, чтобы при прокрутке он всегда был на виду. Эффект при этом будет такой же, как, например, у блока с чатом на сайте cloud.timeweb.com . При скроллинге он всегда остается на месте:
Далее рассмотрим несколько наглядных примеров, как зафиксировать HTML footer на странице.
Пример 1
Создадим простой футер сайта в виде цветного блока с одним словом.
Шаг 1. Напишем HTML-код с большим количеством абзацев, чтобы при прокрутке показать зафиксированный элемент:
Простой пример зафиксированного подвала
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
This text is additional
Footer
Шаг 2 . При помощи CSS-кода выберем шрифт текста на странице и цвет фона, а также настроим расположение элемента:
В итоге получится синий футер на сайте , который при прокрутке страницы всегда остается внизу. Такой объект с текстом растянут по всей ширине окна.
Пример 2
Как сделать подвал сайта так, чтобы в нем были ссылки на внешние ресурсы? Об этом мы расскажем во втором примере: ссылки будут на фотографии бесплатного фотостока.
Шаг 1 . Добавим ссылки на три разных изображения, чтобы потом добавить их в footer HTML :
Пример зафиксированного подвала со ссылками на изображения
Фото1
Фото2
Фото3
Шаг 2 . При помощи CSS-кода настроим размеры сайта и футер с тремя ссылками:
.wrapper height: 1111px;
>
.footer background-color: #aac5fa;
position:fixed;
right:0;
bottom:0;
width:99%;
height: 101px;
>
.text float:none;
font-size:29px;
word-spacing:40px;
padding-left:29px;
>
Шаг 3 . Сделаем так, чтобы при наведении на ссылки менялся размер текста и цвет заливки:
В итоге получится такой footer HTML CSS :
Пример 3
Теперь рассмотрим вариант, как сделать подвал сайта HTML с изображениями-ссылками на два популярных сайта в России. Тег footer не понадобится.
Шаг 1 . Напишем код с большим абзацем, добавим значки соцсетей «ВКонтакте» и «Одноклассники», а также укажем ссылки на их сайты:
Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга. Этот текст нужен просто для того, чтобы показать, как будет двигаться футер во время скроллинга.
Шаг 2 . С помощью CSS-кода закрепим footer внизу страницы и выберем параметры по цвету и не только. Фон страницы будет серым, а объекта со значками — синим.
Шаг 3 . Теперь сделаем так, чтобы фоновый цвет становился белым при наведении курсора на значки:
В результате получится страница, на которой футер будет со значками «ВКонтакте» и «Одноклассники»: по ним можно перейти на сайты соцсетей.
Пример 4
Теперь рассмотрим, как сделать footer внизу страницы HTML с необычным эффектом. Блок будет спрятан под страницей — чтобы его показать, нужно обратить внимание на другой объект. В этом случае таким элементом будет красный квадрат с пунктиром.
Шаг 1 . В HTML-код добавим много абзацев: будет удобнее проверить фиксацию футера на странице:
Чтобы найти footer, наведите курсор на красный квадрат
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
A simple paragraph is for example here.
Спрятанный футер
Шаг 2 . Теперь добавим следующий CSS-код, в котором определим параметры фона, футера на сайте и не только. Шрифт выберем PT Astra Sans, а фон будет голубым.
Шаг 3 . Теперь создадим красный квадрат, который будет показывать спрятанный блок. При помощи значения dashed сделаем такой объект пунктирным, чтобы он выделить его еще больше.
В итоге выйдет страница, на которой спрятанный footer CSS будет плавно появляться и исчезать в любом моменте прокрутки. Такой эффект доступен на любой части страницы. Футер появляется только тогда, когда курсор наведен вниз окна.
Итоги
Мы рассмотрели 4 способа, как зафиксировать подвал сайта HTML . В основном нам помогли следующие CSS-свойства со значениями:
Вместо текста и ссылок в футере можно указать форму для поиска по сайту или запрос клиентам оставить свои контактные данные. Но такие большие блоки могут мешать просмотру страницы. В этом случае поможет способ, который мы рассмотрели в 4 примере: можно создать небольшой элемент, скрывающий подвал HTML .
Как с помощью CSS прижать footer к низу окна браузера
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте. Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход. В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS. HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):
В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.
Первый способ
Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и .wrapper ) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента. CSS-код:
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer
Второй способ
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. CSS-код:
* < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer
Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера. Живой пример 2-го способа
Третий способ
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. CSS-код:
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content
Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера. В результате footer прижат к низу. Живой пример 3-го способа
Четвертый способ
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала. CSS-код:
100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу. Узнать, какие браузеры поддерживают calc() и vh , вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc() , поддержка единицы измерения vh . Живой пример 4-го способа
Пятый способ (самый актуальный)
Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет. CSS-код:
* < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; min-height: 100%; >.content < flex: 1 0 auto; >.footer
Смотрите также
- FireFox и вертикальное выравнивание текста в input[submit] 67 комментариев
- 10 фиксов, решающих проблемы Internet Explorer 6 58 комментариев
- Верстаем кроссбраузерный «резиновый» макет страницы 25 комментариев
- Цвет курсора в поле input и кроссбраузерность 28 комментариев