xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

Наверное самый распространённый способ прижатия футера к низу страницы:

Необходимая разметка:

<body>
    <div class="wrapper">
        Шапка
        Контент
        Колонки
        <div class="footer-push"></div>
    </div>
    <div class="footer">
        Подвал
    </div>
</body>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -100px 0; /* отрицательный нижний отступ на высоту футера */
    padding: 0;
}
.footer-push, .footer {
    height: 100px;
    margin: 0;
    padding: 0;
}

Работает во всех браузерах. Пример.

Единственное момент — у body, врапера и футера нельзя указывать положительные верхний или нижний margin/padding. Сделать это можно для вложенных элементов.

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

Комментарии RSS

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

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

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

это хак, а не дубль

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

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

проверил в IE9, всё нормально

Антон Кондратов, чт 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, то меню растягивается, а футер так и остается на месте.
Метод, который опубликован тут самый эффективный из тех, которых полно в интернете, поверь мне!!!!!

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

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

Добрый день! Подскажите, пожалуйста, как прижать футер к низу в теме 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 поможет, но он пока мало где поддерживается

Спасибо за рецепт! Работает :)

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

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

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

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

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

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

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

подскажите, пожалуйста, почему если задаю у 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; /*говорит о том, что данный блок займет все свободное пространство*/
}

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

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании