Как с помощью 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;
}

Живой пример 1-го способа

к содержанию ↑

Второй способ

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% высоты окна браузера.

Живой пример 2-го способа

к содержанию ↑

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 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 прижат к низу.

Живой пример 3-го способа

к содержанию ↑

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
.content {
	min-height: calc(100vh - 80px);
}

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;
	height: 100%;
}
.content {
	flex: 1 0 auto;
}
.footer {
	flex: 0 0 auto;
}

Узнать про поддержку браузерами свойства flex можно здесь.

Живой пример 5-го способа

Комментарии (134)
  1. 1
    Виталий

    спасибо большое , понравился первый способ

    • 2
      Михаил

      При использовании первых двух способов были проблемы в Опере и Хроме. При открытии страницы с контентом больше окна браузера футер наслаивался на контент, а потом при прокрутке вместе с ним ехал вверх. В Лисе всё нормально работало. Временно решил проблему следующим способом:
      html, body, .wrapper {
      height: 100%;
      }
      #content {
      min-height: 71%;
      }
      Просто увеличиваем минимально возможную высоту контента так, чтобы футер находился внизу, как и положено. Проценты подбираются вживую через консоль, значение зависит от высоты футера. Способ хорошо работает на полностью развёрнутых окнах, при уменьшении окна появляется прокрутка, но лично я не знаю людей, работающих на полуоткрытом браузере. Возможно, на других мониторах тоже будут свои нюанты, но это в любом случае лучше, чем задранный на середину окна футер.

      • 3
        Миша

        Привет, у меня та же проблема, но я не совсем понял твоё решение. Напиши мне, пожалуйста, на почту, я тогда скрин прикреплю что бы быть на 100% уверенным что проблема та же. Мой: mihail.levin.1999@mail.ru Вкратце: есть header и footer. Они примерно как в вк — синие и на всю ширину. Header (шапка) как и положено, прикреплена к самому верху и если текста больше чем высота окна, то при прокрутке она пропадает. Тут всё ок. Проблема с «подвалом». Я не могу добиться того, что бы он был в самом низу страницы и при этом (!), если текста больше чем высота окна, НЕ был виден (не fixed!) пока мы наверху страницы, а показывался только при прокрутке вниз. А проблема у меня, что если текста много, он при дальнейшей прокрутке сидит по середине окна. (со скрином понятнее будет). Жду твоего ответа)
        Если что, вот стили CSS к нему:

        footer {
        	background: #5578A2;
        	bottom: 0px;
        	height: 45px;
        	position: absolute;
        	left: 0;
        	right: 0;
        
        	color: white;
        	font-size: 30px;
        	font-family: "Comic Sans MS";
        	text-align: center;
        }
        
      • 4
        Миша

        Отбой, разобрался) Четвёртый способ идеально мне помог) Спасибо автору)

  2. 5
    Сергей

    Спасибо! Использовал второй способ.

  3. 6

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

    Думаю, как решить эту проблему…

  4. 8

    Спасибо! Воспользовался первым способом.

  5. 9
    Олег

    Спасибо, способ хороший. У меня один только вопрос, а что делать когда появляется админбар и портит всю картину тем что футер становится ниже на 32 пикселя? может подскажете решение?

  6. 10
    Юля

    Автору огромное спасибо! Подошел третий способ, единственное, добавила еще к wrapper ширину 100%, иначе контент съезжал влево.

  7. 11
    igugigu

    еще такой способ существует(с помощью тега table):

    
    <!DOCTYPE html>
    <html>
    
    <head>
     <style type="text/css">
     body,html{
     height:100%;
     }
     </style>
    </head>
    
    <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
    
    <table width="100%" height="100%">
    <tr><td height="300px" style="background-color:#fcf;"></td></tr>
    <tr><td>content</td></tr>
    <tr><td height="300px" style="background-color:#fcf;"></td></tr>
    </table>
    
    </body>
    
    </html>
    
    
    
    
  8. 16
    Виктор

    Использовал первый способ, т.к нужна кроссбраузерная верстка. А во всех остальных способах присутствуют стили которые не поддерживаются IE от 6 до 10 версии

  9. 17
    Алекс

    Спасибо — третий способ отлично подошёл!

  10. 18
    Gul

    И мне третий подошел! Большое спасибо, автор!

  11. 19
    Александр

    Третий способ — лучший для меня выход. Спасибо за статью, и за демки — в частности, иначе бы пришлось на веру все воспринимать :)

  12. 20
    Артем

    Всем привет! Надеюсь сможете помочь! Использовал 5-й способ, другие не подходили.. И все бы супер, НО на айпаде через сафари и хром футер оказывается внизу видимой части страницы. Видно где-то треть, остальное появляется при прокрутке — футер статичен и наложен на контент, т.е. при прокрутке страницы прокручивается вместе с содержимым. Как можно решить данную проблему? Или это баг айоса? К сожалению, проверить работоспособность сайта на макбуке сейчас не могу, как думаете там тоже косяк этот вылезет или не должен? На айфоне все работает, на паре смартфонов под Андройдом тоже все ок, на разных ноутах проблема также отсутствует. Буду благодарен за помощь!

  13. 21

    Спасибо, частично помог третий способ, т.к. у меня разметка создана с помощью самой таблицы. Просто я ее забыл height поставить в 100%, поэтому и не получалось сделать.

  14. 22

    Мне помог такой способ

    Просто прописал в CSS (WordPress, тема Zerif Lite Responsive Boat)

    #footer {
    background: rgba(39, 39, 39, 0.95) none repeat scroll 0% 0%;
    position: fixed;
    bottom: 0;
    width: 100%;

    }

  15. 23
    Юрий

    Спасибо ! Сейчас использовал четвертый способ . Завтра посмотрим как у других отображается

  16. 24
    Сергей

    Как с пятым способом растянуть футер сайта по ширине окна? В примере футер находится внутри wrapper, а сайт у меня 980px, футер соответсвенно тоже.

  17. 25

    Всем привет!
    Возникает большая проблема с фиксированным низом если сверху есть фиксированный элемент.
    Для примера возьмём этот скрипт: ScrollToFixed
    https://github.com/bigspotteddog/ScrollToFixed

    Если использовать атрибут:
    html,
    body { height: 100%; }
    То вся фиксация сводится на нет.
    Испробовал уже несколько разных скриптов.

  18. 26
    Макс

    спасибо большое. 4 способ помог!

  19. 27
    Ника

    ну.. и .. где нажать на соцкнопки? где поделиться публикацией?
    Супер, круто, спасибо!

Ваш комментарий