Как с помощью CSS прижать footer к низу окна браузера
Вступление
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая – как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.
Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.
В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS.
HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):
<html>
<body>
<div class="wrapper">
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
В 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 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
}
Второй способ
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 {
height: 80px;
margin-top: -80px;
}
Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
Третий способ
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.
CSS-код:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически – эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
В результате footer прижат к низу.
Четвертый способ
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.
CSS-код:
* {
margin: 0;
padding: 0;
}
.content {
min-height: calc(100vh - 80px);
}
100vh – это высота окна браузера, а 80px – это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.
Пятый способ (самый актуальный)
Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.
CSS-код:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}
Узнать про поддержку браузерами свойства flex можно здесь.
Комментарии (161)
Спасибо! 4-й помог!
Спасибо автору! Помог 4-й способ.
Огромное спасибо!!
Пятый способ – супер!
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – по мне так один из лучших способов
там фиксация при прокрутке
Здравствуйте!
Благодарю! Правда, простое и эффективное решение.
Всего доброго.
Супер, спасибо. (в 5 способе футер всегда под экраном, даже если контента нет)
Большое спасибо!!!
Отлично подошёл способ, указанный в ссылке. Самый идеальный. Хорошо что нет фиксированной высоты.
это яркий пример говнокода, не делайте так!
Я сделал по-другому. Wrapper поставил 100vh и display: grid. И всё.
Добрый день.
Спасибо огромное!!!
В случае с iPad Wi-Fi (Safari & Chrome) помог 3-й способ. Причем, 3-й способ решил вопрос не только с футером, пофиксался неприятный баг с высотой DIV-ов (верстка на флекс боксе).
С уважением,
Игорь
Способ с гридами:
Люди которые пишут про гриды, вы вообще в курсе что гриды вообще не поддерживает IE на котором сидит около 20% пользователей.
Доля IE вместе с Edge около 8-9%, забудьте про них.
Спасибо! Флекс прямо то, что нужно. Интересно, почему его так поздно добавили, ведь интерфейсы на HTML делались всё время
В последнем методе, который САМЫЙ АКТУАЛЬНЫЙ – явная ошибка. Для wrapper необходимо указать min-height, а не height, что бы он тянулся вниз, при необходимости.
Действительно. Спасибо, исправил.
нужен футер, который всегда на экране, скроллировался только контент, но не футер. “position: fixed” не подходит по объективной причине — футер с ним вываливается из общего потока, совсем, а мне необходимо, чтоб ширина футера зависела от ширина родителя, задавать дважды ширину — для родителя и футера, — не комильфо. в этом плане подошел бы “position: sticky”, но при малом контенте он никуда не приливает.
кароче. написал и сам же через 5 минут нашёл решение. “position: sticky” — то, что нужно, но чтобы работало при малом контенте: родитель “display: flex; flex-direction: column;”, а футер “margin-top: auto”
при наличии других элементов типа form, div, p все идет наперекосяк, т.е. футер прилипает к контенту
Отлично! Эту статью и искал. Как раз интересовало, как прижать футер к низу, не используя flex (способы 1-4). Спасибо большое!
Не знаю почему, но с обычным блоками коряво работает. Выставляя html и body в 100%, размер блока занимал размер окна. Стоило залить контентом почему-то контент вылазил за этот блок. Пока контента нет футер внизу, как появляется контент и имеется скрол то при скроле футер поднимается, вообщем блок body не захватывал контент. display: grid решил проблему
Еще один способ.
.clear { clear: both;}
#footer {
background: #A9A9A9;/*меняем по желанию*/
width: auto;
height: 50px;/*меняем по желанию*/
color: #ffc;/*меняем по желанию*/
padding-top: 2px;
border-radius: 10px;/*меняем по желанию*/
border-style: double;/*меняем по желанию*/
margin-top: 5px;/*меняем по желанию*/
}
Отличное решение (то, что №5). Спасибо.
5 способ помог. Спасибо.
Помог 4й способ, спасибо! Но я не вычитал высоту футера,
а просто поставил min-height: 60vh; ну или сколько кому нужно.