Футер внизу страницы css. Как с помощью CSS прижать footer к низу окна браузера
Одним из основных правил вёрстки является прижатие footer к низу html-страницы, вне зависимости от размера основного контента. Существует множество способов это сделать. В данной теме мы рассмотрим несколько популярных способов как прижать footer к низу страницы:
Сначала создадим структуру html-документа. Все содержимое тега body нужно обернуть в общий div (в данном примере
). А весь основной контент обернуть в отдельный div, не включая footer (в данном примере ).
Document
Как прижать footer к низу страницы при помощи свойства display: flex
Этот способ я использую чаще всего. Он достаточно быстрый, простой и не требует задавать footer значение фиксированной высоты. Данное свойство уже стало поддерживаться большинством браузеров, поэтому можно использовать для кроссбраузерной вёрстки.
Как прижать footer к низу страницы с помощью позиционирования
html,
body {
height: 100%;
}
.container {
position: relative;
min-height: 100%;
}
.content {
padding-bottom: 100px; /*отступ должен равняться высоте footer*/
}
footer {
position: absolute;
width: 100%;
height: 100px; /*обязательно нужно задать фиксированное значение высоты*/
}
Применяя данный способ, вам придётся задать footer фиксированное значение высоты, иначе он закроет часть контента, что может быть неудобным для адаптивной вёрстки.
Прижатие футера к низу страницы используя единицы измерения vh
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Данные единицы поддерживаются только современными браузерами.
Перед применением лучше проверить в сервисе: https://caniuse.com/#search=calc .
Content {
min-height: calc(100vh - 100px); /*100vh - это высота окна браузера, 100px - высота footer*/
}
footer {
height: 100px;
}
Прижатие футера к низу экрана путём создания дополнительного блока
Этот способ предполагает создание дополнительной html-конструкции. Потребуется новый контейнер div. Обратите внимание, что блоку с селектором класса content
задается отрицательный margin
по размеру высоты дополнительного блока.
Document
CSS-код в данном случае будет иместь следующий вид:
Довольно часто появляется необходимость прижать подвал к низу страницы, даже если высота контента сайта меньше высоты экрана. В этом нам помогут такие прекрасные свойства, как position
и bottom
.
На первый взгляд задача очень простая - просто поместить один div
внизу страницы. Однако стоит учесть, что наполнение контентом может быть меньше страницы.
Начнем с самого просто, допустим у нас есть
подвала с каким-то наполнением:
Этот footer
обязательно помещать перед закрывающим тэгом
, не помещая дополнительно его внутрь других дивов.
Вот, как будет выглядеть CSS
стиль для этого footer
, чтобы он был прижат всегда к низу страницы:
Footer {position:absolute; /* задаем элементу абсолютное позициониование */
bottom:0; /* прижимаем нижнюю границу элемента к низу экрана */
left:0; /* прижимаем левую границу элемента к левому краю экрана */
/* далее идут остальные свойства */
padding:20px 0; background:#993333; color:#fff; text-align:center; width:100%;}
Абсолютное позиционирование заставляет
размещаться на странице, полностью игнорируя другие элементы. bottom
и left
задают координаты этого дива на экране.
Казалось бы, все - подвал прижат к низу страницы, когда наполнение контентом меньше высоты страницы все выглядит как надо. Но нет, вы заметите, если полнить контентом страницу больше высоты экрана, то часть наполнения скроется под подвалом, все потому, что абсолютное позиционирование дает эффект игнорирования других элементов, и, возможно, у вас появится пустое место под подвалом.
Чтобы избавиться от этих двух проблема, нужно сделать дописать CSS
стиль для
тэга, да-да, именно
, а не
, иначе все не будет работать как надо, вот как будет выглядеть этот стиль:
html {
position:relative; /* относительное позиционнирование */
min-height:100%; /* минимальная высота */
}
Вы должны знать, что абсолютное позиционирование зависит от позиционирования родительских элементов. Таким образом, если позиционирование у родительского элемента relative
, то отсчет координат идет относительно краев этого родительского элемента. Минимальная высота нужна, если контента меньше, чем высота экрана, чтобы подвал все-таки был прямо внизу страницы.
Проблема с перекрытием контента подвалом решается разными путями, но самый хороший, по моему мнению, добавить тэгу
значение padding
снизу, равное или чуть больше высоте подвала, чтобы контент не вплотную прилипал к подвалу, примерно такой стиль:
body {padding:0 10% 60px 10%;}
Теперь все, подвал будет всегда внизу, он не будет заставлять появляться полосу прокрутки, если контента меньше. Проще говоря, это универсальный метод. Теперь я приведу пару примеров использования этого метода, чтобы вы сами убедились в его действии.
У нас есть примерно такой html
код:
Страница
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
И такой CSS
код.
Прижать футер к низу экрана. Требования:
подвал прижат к низу экрана при высоте окна браузера больше высоты страницы не зависимо от контента
футер находится на положенном ему месте при объеме контента больше, чем высота окна браузера
работает в во всех популярных браузерах
надежность — не зависит от сложности верстки
Теория
Хорошим тоном является заполнение сайтом всей доступной области экрана браузера (как минимум по высоте для статичных по ширине дизайнов).
Решение
Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:
Шаг 1
Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (), подвалу жестко указываем высоту ().
При этом общая высота сайта составит высота экрана + высота подвала.
Шаг 2
Заметка
: при использовании блочной верстки и плавающих основных блоков (колонок) для.hFooter следует добавить : both, чтобы подвал расположился под колонками.:
HFooter {
clear: both;
height: 40px;
}
Проверено в:
Заметка 1:
Если ты уже немного освоил CSS, тогда может возникнуть вопрос: " Зачем использовать дополнительный элемент, если можно воспользоваться ?". Ответ — так просто его тут использовать нельзя, т.к. размер блока равен его ширине и высоте + сумме внутренних отступов + сумме толщин бордюров. Связка : 100% и даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами "первого экрана". Как это можно обойти смотри ниже.
Заметка 2.
В Opera версии 9.5 и выше при добавлении doctype этот пример не сработает. Варианты обхода:
добавить в основной тег-контейнер хотя бы один плавающий блок:
Это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив — этот прим поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках
update 28.12.09 — проблемы с z-слоями
В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникаем потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div class="popup"), которое будет позиционироваться относительно контейнера main.
[...]
[...]
Main {
position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */
z-index: 1; /* z-index меньше чем у футера, чтобы тот был виден */
}
.popup {
position: absolute;
z-index: 100;
[...]
}
.footer {
height: 50px;
margin-top: -50px;
position: relative; /* чтобы можно было задать z-index */
z-index: 2; /* больше, чем у main чтобы быть видимым */
}
Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) — вот тут начинаются проблемы. Немотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:
Вариант 1 — искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен в main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.
Решение 2 — абсолютное позиционирование
Идея похожа на решение 1:
растягиваем основной блок на всю всот экрана
резервируем место для подвала
относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием
[...]
Html, body {
height: 100%;
}
.main {
min-height: 100%;
position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */
}
.footer {
height: 50px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
* html .footer {
bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* хак для ие6, у которого есть косяк со смещением на 1px */
}
Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.
Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.
Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:
После того как структура страницы готова, приступаем к настройке css.
Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.
Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация .
В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.
Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.
Вы скорее всего уже не раз видели, что футер страницы был закреплён внизу, независимо от объёма контента. Сделаем это средствами CSS!
Как закрепить футер (footer) или подвал внизу web-страницы?
2. Код HTML
Тут вся разметка и lorem ipsum (шаблонный текст).
Отзывчивый футер
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
3.
Оба файла должны быть в одной директории.
Теперь меняем размеры окна браузера и смотрим за тем, как футер закреплён внизу.
4.
Смотрим пример работы закреплённого внизу футера.
