Как прижать footer к низу окна браузера с помощью CSS?

Несколько раз меня спрашивали об этом в переписке по электронной почте. Расскажу всем.

В CSS верстке есть пара способов прижать footer к низу окна браузера, если контента на странице не очень много.

Оба варианта подразумевают позиционирование footer относительно растянутого на высоту окна браузера элемента (body или div, например).

Недостатки в обоих случаях общие: высота footer должна быть известна и определена; для IE используются хаки.

Вариант 1

В этом варианте блок контента растягивается на всю высоту окна, footer с помощью отрицательного значения margin-top смещается вверх.


<html>
  <body>
    <div id="content">
    content
    </div>
    <div id="footer">
    footer
    </div>
  </body>
</html>


html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#footer {
  position: relative;
  margin-top: -2.5em;
  height: 2.5em;
}

Вариант 2

В этом варианте на всю высоту окна растягивается body, а footer абсолютно спозиционирован относительно нижней его части. Нижний padding блока контента следует сделать больше и равным высоте footer.


<html>
  <body>
    <div id="header">
    header
    </div>
    <div id="content">
    content
    </div>
    <div id="footer">
    footer
    </div>
  </body>
</html>


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
}
#header {
  height: 3em;
  width: 100%;
}
#content {
  padding-bottom: 2.5em;
}
#footer {
  height: 2.5em;
  width: 100%;
  position: absolute;
  bottom: 0;
}



Много комментариев (54) к “Как прижать footer к низу окна браузера с помощью CSS?”

  1. tyouha :

    Второй вариант кака, не работает в IE если смотреть в окошке


  2. Gorky :

    Не понравился ни один из способов. Предлагаю свой: http://gorky.tlt.ru/blog/?p=14


  3. Баранов Андрей :

    Для Gorky: Спасибо. Посмотрел, оставил свои соображения на странице по Вашей ссылке. Вкратце: в Вашем варианте не предусмотрен случай, когда контента может быть больше, чем поместится в окне браузера без вертикальной прокрутки. А, как раз при этом, footer останется на своем месте, т.е. как ему и предписано в CSS.
    min-height: 100% – не случайно присутствует в обоих вариантах.


  4. Gorky :

    Андрей, спасибо и Вам за комментарий. Просто я как раз и думал про входные страницы страницы, где заранее известно что текста будет немного. Как компромисс – на больших страницах использовать Ваш код, а там где заранее известно что будет мало текста – мой :)

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


  5. слав :

    Спасиб, то что я искал.


  6. yurash :

    Если в content, в тегах img не указана высота то footer остается посредине страницы и ни в какую не хочет быть внизу :(.
    При обновлении страницы он уже размещается там где нужно. Что делать, как побороть?


  7. Падла! :

    сам не пробовал но подозреваю что можно в CCS прописать такой код

    img {height:auto}

    должно сработать… мне так кажется… ;)


  8. zews :

    в мозиле не работает!?


  9. Баранов Андрей :

    для zews:

    что именно?


  10. zews :

    допустим, у body сделать фон (background: url(bottom_bg.gif) repeat-x bottom), в мозиле и в опере, при большом контенте (больше чем 100%) фон остается на месте.


  11. Nicolay :

    Надо заставить работать min-height в IE XHTML 1.1. Кажется хак есть.
    Пользуюсь случаем, прошу попросить автора написать как-нить статью на тему.
    height: 100% HTML 4.01 – XHTML 1.1
    Чтобы оканчательно прояснить можно ли састваить вести себя height для xhtml также как и для html.


  12. Баранов Андрей :

    О поведении BODY при различных значениях height:
    http://xhtml.ru/2005/12/12/body_height_research/


  13. Падла! :

    По спецификации xhtml высоты нету… просто взяли и выкинули… уроды.. сам долго парился, но… возможно вы сможете мне объяснить почему я должен прибегать к хакам, вместо того что бы сверстать в html простом? или xhtml но не объявляя тип документа? ведь именно для этого и сущевствует множество стандартов. а каким именно воспользоваться в той или инной ситуации дело ваше.

    Не давно сталкнулся с этой проблеммой, надо было прижать footer к низу но по некоторым причинам мне не подходили способы описанные выше. Ну и зачем мне тогда нужен Xhtml? не зачем, я сделал все тоже самое только без объявления стандарта, и все прекрастно работало… (высота 100%)


  14. ScableR :

    Понадобилось в одном проекте использовать второй пример…
    В исходном моём CSS для тэга body была задана градиентная картинка, которыя прижималась к самому низу. Когда я так же добавил нужное из вашего примера #2, то получил “артефакт” в FireFox 1.5 – картинка следовала чётко за нижней границей броузера (сжимаю страничку – бэкграунд движется вверх и наобород). Чуть не рехнулся пытаясь сообразить как исправить… А всё, как обычно, решил случай… Я уже махнул рукой на этот глюк и решил задать для html самый тёмный цвет от картинки – пусть она плавает, зато продолжение в самом низу не будет светлым (надеялся на то, что выше стиль для body всё перекроет)… И тут чуднесным образом всё сразу становится как и надо.
    ps: спасибо за способы!


  15. VolCh :

    Попробовал оба варианта, лично для меня недостатки:
    1-ый – контент растянут на размер окна, футер изначально не виден в окне и скроллинг появляется;
    2-ой – контент не растянут до футера при небольщом объёме, как не пробовал, без задания минимальной высоты не получается растянуть, а если задавать опять таки скроллинг вылазит :(

    может посоветует кто-нибудь как во втором варианте растянуть блок контента если его мало на высоту окна (минус хидер и футер), а если много на достаточную для вывода высоту?


  16. Dojd :

    Понравился первый вариант больше всего. Спасибо.


  17. Wizard :

    Очень ценю сайты, для просмотра которых посетителю не требуется иметь продвинутое оборудование. Поэтому большинство моих проектов выполнены методом “max-min-640*min-480″ то есть минимальное разрешение экрана, на котором ‘всё будет хорошо’- 640*480. Я считаю, что важную информацию легко поместить и на такой площади. Исходя из вышесказанного, привожу свой пример, в том числе и footer’а:__________________________________
    html{height:100%;max-height:100%;max-width:100%;padding:0; margin:0;}
    body{height:100%;max-height:100%;padding:0;margin:0;}
    #head{z-index:0;top:0;left:50%;margin-left:-321px;width:640px;height:40px;}
    #foot{z-index:n+1;position:absolute;margin-left:-321px;left:50%;bottom:0px;width:640px;height:~40px;}
    Блоки, ясно дело, в DIV-ах, n- оличество блоков. Предпочтаю этот метод имено при компактной вёрстке, так как работает на IE_5-7, Opera_8-9, FF_1.5, можено считать кросбраузерным решением.
    При скроллинге правильных слоёв (например, блок “#main”, если в нём содержится то что Вы желаете прокручивать), футер остаётся неподвижен.


  18. teK :

    Второй способ мне понравился больше, так как при небольшом количестве контента полосы прокрутки не появляються, а футер попрежнему внизу. Один минус – не работает в пятом IE.
    Первый способ работает везде, но всё время появляеться полоса прокрутки.


  19. SES :

    http://www.webmasterworld.com/forum83/200.htm


  20. Koltsoff :

    Способы хорошие, но не сказано, что в первом footer закрывает собой часть content.


  21. Баранов Андрей :

    Koltsoff, достаточно контент поместить в блок, нижний padding которого будет чуть больше footer. В этом случает footer будет закрывать padding контента.


  22. Хрюндель :

    Если ваш сайт расположен по центру браузера, перед тем как придать футеру обсалютное значение, обведите футер новым div’ом и укажите в стилях

    width:ширинасайта_px;
    margin:0 auto;

    иначе футер прилипнет к левому краю браузера


  23. Валентин Коваленко :

    На основе данного исследования попробовал решить классическую проблему с прижатием футтера к низу окна, судите сами, что вышло: http://vk.osvita.org.ua/footer.htm

    Отдельную статью писать к сожалению не когда, сдаю проект. Если увидите грабли, пишите (valentin.kovalenko#bigmir.net), буду искать причину.


  24. Валентин Коваленко :

    … пардон опечатка вышла:
    на основе исследования http://xhtml.ru/2005/12/12/body_height_research/ пробуйте буду рад комментариям на почту.


  25. Shum.er :

    Второй вариант прекрасно работает в IE7 большего и не надо, а раз и остальные браузеры держат, значит все хорошо. Спс за подсказку.


  26. Erlioniel :

    Валентин Коваленко, большое спасибо! Очень помогло… Я промучался пол дня, потом попробовал модифицировать ваше детище. Спасибо. Оптимально оказалось… =)


  27. Kimadio :

    It was a great pleasure for me to visit and enjoy your site. Keep it running!


  28. Арина :

    По поводу того, что “подвал” закрывает содержимое. Можно добавить отступ, но вот полоса прокрутки, которая появляется при увеличении содержимого – скрыта “подвалом”. Получается совсем некрасиво :(


  29. Валентин Коваленко :

    RE: Арина

    Это касательно которого варианта и в каком броузере?


  30. phpoptimizer :

    Вариант №1:

    Mozilla Firefox 2.x – даже при незначительном контенте footer не попадает в ‘экран’, появляется вертикальная полоса прокрутки. Тоже самое и под Opera 9.x;

    Под IE 6.0 все супер, вот только для #content добавить padding-bottom: 3em; чтоб footer не налазил на контент (как уже было отмечено).

    Удачи!


  31. Leva :

    Помнится както пришлось повозиться с этим вопросиком… а тут гляди прям статьи в тему… Спасибо авторам)


  32. dark-demon :

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


  33. Ниткин :

    Большое спасибо за статью


  34. asv2001 :

    Всем спасибо за статью


  35. *vmr :

    Блин, а посмотреть как люди верстают сайты влом?
    http://infostore.org/user/vmr(см. сорцы) – футер всегда снизу, отображается во всех браузерах, не появляются полосы прокрутки, и никаких артефактов.
    Все очень просто и элегантно. Но есть одно НО! – эта страница не является xhtml! (((


  36. *vmr :

    Вопрос в том как сделать футер для XHTML 1.1! Поделитесь мыслями.


  37. Анна :

    спасибо за помощь в работе. использовала первый вариант. все отлично работает, одна проблема: в Opera при большом количестве текста в верхнем блоке этот текст начинает наезжать на футтер. помогите пожалуйста! как побороть?


  38. PaveL :

    А хотя б один из способов работает толково? Сам проверил… НЕТ!


  39. *vmr :

    Чем не годится вариант предложенный тремя постами ранее?
    Просто создаем таблицу с height=100%, нижняя строка которой и еть футер
    Приведенная выше ссылка отображается корректно во ВСЕХ браузерах
    Кому не нравится что там много текста – то вот пожалуйста “укороченный” вариант


  40. Щербань Максим :

    *vmr, жжёшь, кросавчег :) “Как люди верстают сайты” =) Учи матчасть – с чем связана “гонка” за CSS’ной бестабличной версткой.

    Авторам статьи – спасибо, на практике не пригодилось, но почитать интересно было.


  41. panda :

    Второй способ вообще замечательный, работает в IE 6, IE 7, FF 2.0.0.7, Opera 9.23 (проверено лично), футер всегда прижат к низу страницы при любом количестве контента, никаких левых полос прокрутки, но должны быть соблюдены определенные условия (см. внизу)

    Код страницы:

    header

    Содержжание страницы (разнообразные блоки)

    footer

    css:

    *
    {
    margin: 0;
    padding: 0;
    }

    html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }

    body {
    height: 100%;
    position: relative;
    }

    html>body
    {
    height: auto;
    min-height: 100%;
    }

    #header {
    height: 3em;
    width: 100%;
    }

    #content {
    padding-bottom: 2.5em;
    }

    #footer {
    height: 2.5em;
    width: 100%;
    position: absolute;
    bottom: 0;
    }

    Условия:
    1. Необходимо полностью задать заголовок определения документа
    для XHTML 1.0 Transitional с полным путем на сайт W3C (найдете где угодно; не забывайте, там еще в теге идет дополнительная строка). Сам лично не проверял, но уверен на 99%, что способ работает и в XHTML 1.1

    2.Первое определение BODY- для IE, второе-для нормальных браузеров

    3.Этот способ работает и для типа документа HTML 4.01, но в этом случае блоки контент и футер надо поместить в блок all:
    all
    {
    height: 100%;
    position: relative;
    }
    , т.к. осел почему-то не понимает НОРМАЛЬНОГО КОНКРЕТНОГО ОСЛИНОГО определения body:
    body {
    height: 100%;
    position: relative;
    }
    вот и все! Попробуйте этот способ, не пожалеете :)


  42. panda :

    Код страницы в предыдущем сообщении:

    header

    Содержание страницы (разнообразные блоки)

    footer


  43. panda :

    Код страницы:
    {

    header

    Содержжание страницы (разнообразные блоки)

    footer

    }


  44. panda :

    Блин, не получается поделиться информацией :). Напишу так: после открывающего тега и идет открывающий тег блока content, потом блок header, под ним-блоки основного содержания страницы, потом блок content закрывается, т. е. блок content содержит в себе блоки хидера и все содержимое кроме футера; после идет блок футера, потом закрывается и . Все :)


  45. panda :

    Блин, не получается поделиться информацией :). Напишу так: после открывающего тега html и body идет открывающий тег блока content, потом блок header, под ним-блоки основного содержания страницы, потом блок content закрывается, т. е. блок content содержит в себе блоки хидера и все содержимое кроме футера; после идет блок футера, потом закрывается body и html. Все :)


  46. aikbis :

    как раз на footer сейчас остановился,
    дают разные варианты – не работают в ie7 и последней опере,panda дали бы ссылку, где это у вас работает, действительно пробовал
    нормальное определение body, ie7 не понимает: body {
    height: 100%;
    position: relative;
    }
    1и 2 условия наверное как раз и нехватает для работы схемы, попробую
    http://www.aik.tu1.ru


  47. panda :

    Первое условие КРАЙНЕ важно, без него у Вас вряд ли что получится. Способ 100% рабочий, без всяких скидок, проверен и перепроверен мной лично на трех проектах, другими людьми тоже. Если что – пишите, разберемся. Кстати, на основе этого шаблона я разработал шаблон сайта с тремя колонками в бестабличной верстке, на реальном проекте не тестил, но вроде получилось неплохо, во всех вышеуказанных браузерах работает можно сказать одинаково. Интересно-пишите.


  48. red :

    Есть ли возможность при использовании этих способов прибить картинку на бэкграунде книзу.
    Такая трабла, что при большом разрешении все в норме, но при маленьком картинка подпригивает в ФФ и Опере. Насколько понял это из-за height:100% для html.
    Сколько не парился – ничего не получается.
    Может кто знает ответ


  49. Елена :

    Спасибо, мне очень пригодился тот способ, в котором у футера

    height:Npx;
    margin-top:-Npx;

    Правда долго мучалась с хаками, но заработало :)


  50. o_O :

    А вот задачка такого содержания:
    1) Футер прибит к низу, причём при переполнении контентом, он не перекрывает ничего.

    2) Колонки одной высоты, и тянуться за переполнением контента.

    3) При малом, наполнении основного блока, футер и всё содержимое отображаеться без прокруток, НО! колонки тянуться от хидера, до футера, без пустых пространств.

    4) DOCTYPE – любой XHTML

    P.S.: моими культями вышло только в Quirks Mode.
    Проблема в IE6, этот броузер не хочет растягивать одну из колонок при указании DOCTYPE.


  51. Александр :

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


  52. Дмитрий :

    а зачем в первом примере использовать * html #content чтобы задать 100% высоту для ie, разве нельзя обойтись трюком с !important, также как во втором примере?


  53. DenX :

    А у меня на http://www.4x.at.ua всё прекрасно работает и если материала меньше и если больше чем размер экрана. Футер всегда внизу.


  54. Дмитрий :

    К чему все эти споры и рассужения?
    Не проще ли использовать таблицу 100% высоты с двумя строчками, на верхней ширина 99%, на нижней строчке ширина 1%? Да, еще надо не забыть про ширину body 100% и доктайп, чтобы таблица растягивалась на все окно. И всего делов, футер всегда внизу и количество контента погоду не сделает.



22 queries 0.233 seconds.