CSS → Прижать футер к низу страницы (sticky footer)

15.04.2011

Способ прижатия футера с помощью flexbox.

Разметка:

<body>
  <div class="header">Шапка</div>
  <div class="main">Контент</div>
  <div class="footer">Подвал</div>
</body>

CSS:

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
}
.main {
  flex-grow: 1;
}

Пример.

Ещё несколько способов прижать подвал.

Похожие записи

Комментарии

Петров Николай
16.04.2011, 17:59

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

Принципиально этот косяк ничего не меняет конечно, т.к. страниц без контента на нормальных сайтах почти не встречается.
Но в карму оперы все равно, хоть и маленький, но минус.

Гость
09.11.2011, 11:31

height: auto !important;
height: 100%; дубль , переопределение правил.

Гость
09.11.2011, 18:21

и где про этот хак почитать? срабатывать должно последнее свойство.

Гость
09.02.2012, 12:15

IE засрал пример во всех своих версиях (если изменять размеры по вертикали - футер не двигается)

roma_shka
15.05.2012, 18:59

Антон Кондратов, чт 21/04/2011 - 22:09 #

По мне лучше так:

html, body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 0 100px 0;
}
.footer-push, .footer {
height: 100px;
position: absolute;
bottom: 0;
}

твой метод не всегда хорош, если использовать меню типа аккордеон на jQuery, то меню растягивается, а футер так и остается на месте.
Метод, который опубликован тут самый эффективный из тех, которых полно в интернете, поверь мне!!!!!

Гость
21.06.2012, 15:51

какой тогда метод хорош с аккордеоном?

Александр
15.07.2012, 21:41

Извините за возможный глупый вопрос. Я не ставил не в body не в wrapper отступов, а поставил для хедера, который вложен (как было сказано). Но все поломалось таки. Я решил проблему созданием еще одного класса над хедером, который служит отступом. Есть варианты проще?

Костик Корепин
19.10.2012, 18:05

Добрый день! Подскажите, пожалуйста, как прижать футер к низу в теме at_subtheme - подтеме Adaptive Theme. В настройках темы не нашел как это сделать, с помощью правки CSS тоже не смог. Сделал как у Вас написано.

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  height: 100%;
  overflow-y: scroll;
}

body {
  min-height: 100%;
  height: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility\9;
  /* Only IE, can mess with Android */
}

По файрбагу глядел по высоте занимают весь экран. Нормально значит. Далее wrapper там нет, зато есть блок с id="page", по сути тот же wrapper. Ему значит ставлю

#page {
    min-height: 100%;
	height: auto !important;
	height: 100%;
	padding: 0;    
}

Но блок page уже не тянется по всей длине экрана, подскажите, пожалуйста как растянуть, чтобы футер прижать.

Всё хорошо, кроме того, что высота футера задана жёстко ;)

создать прибитый резиновый футер средствами css сложновато. flexbox поможет, но он пока мало где поддерживается

Igor Webpages
30.11.2013, 22:26

Здравствуйте, уважаемый xandeadx.
Спасибо за полезные статьи на вашем сайте и за ценные комментарии на форуме drupal.ru
Хочу попросить вас попробовать разобраться и предложить решение проблемы, связанной непосредственно с темой данной статьи и приведенного вами способа фиксировать подвал к нижней границе окна браузера.
Проблема наблюдается при использовании плагина fancybox, а проявляется в скачке/прокрутке страницы в самый верх при вызове метода fancybox (клике на ссылку с классом fancybox).
Конфликтной точкой является стиль css: html, body {height: 100%;} который используется в данном способе.
Способ, описанный в статье, я считаю самым лучшим, давно его использую и не очень хочу переходить на другие, к примеру с применением position.

С уважением, Igor Webpages.

не сталкивался с такой проблемой

Гость
05.02.2014, 13:02

При в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.

Гость
05.02.2014, 13:03

При [!DOCTYPE html] в ИЕ 8 при ресайзе за нижнюю границу подвал залипает на месте.

Гость
06.02.2014, 09:02

IE8 не поддерживает HTML5. Пишите DOCTYPE от XHML и т.п.
P.S. И не используйте этот чертов IE. Все в Chrome!

Гость
06.05.2015, 07:50

Здравствуйте! Помогите пожалуйста, есть сайт http://draftmann.com, не могу прижать футер, пришлось задать для контента min-height:800px; но это не привильно, для тегов html, body, ставлю height:100%, но когда ставлю для обертки yt_wrapper - height:100% все работает, но только на тех страницах где контент не превышает размер экрана, а все что выходит за пределы экрана обрезается, полоса прокрутки пропадает. Спасибо.

Гость
16.06.2015, 18:26

подскажите, пожалуйста, почему если задаю у body min-width: 1250px; на устройствах где высота больше ширины, все летит в тартарары? height: 100% перестает работать, футер повисает где-то в воздухе, под ним разные артефакты

Прошу прощения за, возможно, глупый вопрос, я только начинающий, но почему нельзя просто задать футеру position:relative;bottom:0; ? Разве проблема не становится решенной?

position: relative;
bottom: 0;

сработает только тогда, когда будет задана конкретная высота, допустим:

body {
height: 900px;
}

section {
height: 90%;
}

footer {
position: relative;
bottom: 0;
}

В этом случае футер упадет вниз, но "body" чаще всего делают резиновым, а не фиксированным.

Есть вариант делать так:

body {
height: 100%;
}

section {
height: inherit;
}

footer {
position: absolute;
bottom: 0;
}

или же заменить position: absolute; на position: fixed; смотря как вам нужнее. В этом случае "body" резиновый.

Есть еще хороший вариант, это использовать flex-box. Но на данный момент там есть подводные камни.

html {
min-height: 100%;
display: flex;
flex-direction: column;
}

body {
display: flex;
flex-direction: column;
flex: auto;
}

section {
flex-grow: 1; /*говорит о том, что данный блок займет все свободное пространство*/
}

в этом случае футер тоже будет внизу.

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