Как прижать footer к низу окна браузера с помощью CSS?
Несколько раз меня спрашивали об этом в переписке по электронной почте. Расскажу всем.
В CSS верстке есть пара способов прижать footer к низу окна браузера, если контента на странице не очень много.
Оба варианта подразумевают позиционирование footer относительно растянутого на высоту окна браузера элемента (body или div, например).
Недостатки в обоих случаях общие: высота footer должна быть известна и определена; для IE используются хаки.
Вариант 1
В этом варианте блок контента растягивается на всю высоту окна, footer с помощью отрицательного значения margin-top смещается вверх.
content
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.
header
content
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;
}
Второй вариант кака, не работает в IE если смотреть в окошке
2005-10-18 at 5:01 pm
Не понравился ни один из способов. Предлагаю свой: http://gorky.tlt.ru/blog/?p=14
2005-10-18 at 8:28 pm
Для Gorky: Спасибо. Посмотрел, оставил свои соображения на странице по Вашей ссылке. Вкратце: в Вашем варианте не предусмотрен случай, когда контента может быть больше, чем поместится в окне браузера без вертикальной прокрутки. А, как раз при этом, footer останется на своем месте, т.е. как ему и предписано в CSS.
min-height: 100% – не случайно присутствует в обоих вариантах.
2005-10-18 at 10:20 pm
Андрей, спасибо и Вам за комментарий. Просто я как раз и думал про входные страницы страницы, где заранее известно что текста будет немного. Как компромисс – на больших страницах использовать Ваш код, а там где заранее известно что будет мало текста – мой :)
Кстати, раз уж представился случай, хочу пожелать успеха и процветания (то бишь много интересных и полезных материалов) Вашему сайту. Удачи!
2005-10-19 at 9:16 am
Спасиб, то что я искал.
2005-10-19 at 11:31 pm
Если в content, в тегах img не указана высота то footer остается посредине страницы и ни в какую не хочет быть внизу :(.
При обновлении страницы он уже размещается там где нужно. Что делать, как побороть?
2005-10-28 at 12:50 am
сам не пробовал но подозреваю что можно в CCS прописать такой код
img {height:auto}
должно сработать… мне так кажется… ;)
2005-11-24 at 5:37 pm
в мозиле не работает!?
2005-12-01 at 5:46 pm
для zews:
что именно?
2005-12-01 at 5:51 pm
допустим, у body сделать фон (background: url(bottom_bg.gif) repeat-x bottom), в мозиле и в опере, при большом контенте (больше чем 100%) фон остается на месте.
2005-12-01 at 8:18 pm
Надо заставить работать min-height в IE XHTML 1.1. Кажется хак есть.
Пользуюсь случаем, прошу попросить автора написать как-нить статью на тему.
height: 100% HTML 4.01 – XHTML 1.1
Чтобы оканчательно прояснить можно ли састваить вести себя height для xhtml также как и для html.
2005-12-02 at 12:57 am
О поведении BODY при различных значениях height:
/2005/12/12/body_height_research/
2005-12-12 at 7:52 pm
По спецификации xhtml высоты нету… просто взяли и выкинули… уроды.. сам долго парился, но… возможно вы сможете мне объяснить почему я должен прибегать к хакам, вместо того что бы сверстать в html простом? или xhtml но не объявляя тип документа? ведь именно для этого и сущевствует множество стандартов. а каким именно воспользоваться в той или инной ситуации дело ваше.
Не давно сталкнулся с этой проблеммой, надо было прижать footer к низу но по некоторым причинам мне не подходили способы описанные выше. Ну и зачем мне тогда нужен Xhtml? не зачем, я сделал все тоже самое только без объявления стандарта, и все прекрастно работало… (высота 100%)
2005-12-29 at 5:08 pm
Понадобилось в одном проекте использовать второй пример…
В исходном моём CSS для тэга body была задана градиентная картинка, которыя прижималась к самому низу. Когда я так же добавил нужное из вашего примера #2, то получил “артефакт” в FireFox 1.5 – картинка следовала чётко за нижней границей броузера (сжимаю страничку – бэкграунд движется вверх и наобород). Чуть не рехнулся пытаясь сообразить как исправить… А всё, как обычно, решил случай… Я уже махнул рукой на этот глюк и решил задать для html самый тёмный цвет от картинки – пусть она плавает, зато продолжение в самом низу не будет светлым (надеялся на то, что выше стиль для body всё перекроет)… ? тут чуднесным образом всё сразу становится как и надо.
ps: спасибо за способы!
2006-02-12 at 9:28 am
Попробовал оба варианта, лично для меня недостатки:
1-ый – контент растянут на размер окна, футер изначально не виден в окне и скроллинг появляется;
2-ой – контент не растянут до футера при небольщом объёме, как не пробовал, без задания минимальной высоты не получается растянуть, а если задавать опять таки скроллинг вылазит :(
может посоветует кто-нибудь как во втором варианте растянуть блок контента если его мало на высоту окна (минус хидер и футер), а если много на достаточную для вывода высоту?
2006-02-25 at 10:16 pm
Понравился первый вариант больше всего. Спасибо.
2006-03-03 at 3:18 pm
Очень ценю сайты, для просмотра которых посетителю не требуется иметь продвинутое оборудование. Поэтому большинство моих проектов выполнены методом “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”, если в нём содержится то что Вы желаете прокручивать), футер остаётся неподвижен.
2006-03-29 at 12:40 pm
Второй способ мне понравился больше, так как при небольшом количестве контента полосы прокрутки не появляються, а футер попрежнему внизу. Один минус – не работает в пятом IE.
Первый способ работает везде, но всё время появляеться полоса прокрутки.
2006-04-15 at 11:55 am
http://webmasterworld.com/forum83/200.htm
2006-06-09 at 1:10 pm
Способы хорошие, но не сказано, что в первом footer закрывает собой часть content.
2006-07-12 at 7:29 pm
Koltsoff, достаточно контент поместить в блок, нижний padding которого будет чуть больше footer. В этом случает footer будет закрывать padding контента.
2006-07-13 at 12:27 am
Если ваш сайт расположен по центру браузера, перед тем как придать футеру обсалютное значение, обведите футер новым div’ом и укажите в стилях
width:ширинасайта_px;
margin:0 auto;
иначе футер прилипнет к левому краю браузера
2006-07-25 at 8:51 pm
На основе данного исследования попробовал решить классическую проблему с прижатием футтера к низу окна, судите сами, что вышло: http://vk.osvita.org.ua/footer.htm
Отдельную статью писать к сожалению не когда, сдаю проект. Если увидите грабли, пишите (valentin.kovalenko#bigmir.net), буду искать причину.
2006-08-26 at 7:42 pm
… пардон опечатка вышла:
на основе исследования /2005/12/12/body_height_research/ пробуйте буду рад комментариям на почту.
2006-08-26 at 7:50 pm
Второй вариант прекрасно работает в IE7 большего и не надо, а раз и остальные браузеры держат, значит все хорошо. Спс за подсказку.
2006-09-08 at 1:08 pm
Валентин Коваленко, большое спасибо! Очень помогло… Я промучался пол дня, потом попробовал модифицировать ваше детище. Спасибо. Оптимально оказалось… =)
2006-09-10 at 12:58 am
It was a great pleasure for me to visit and enjoy your site. Keep it running!
2006-12-02 at 9:25 pm
По поводу того, что “подвал” закрывает содержимое. Можно добавить отступ, но вот полоса прокрутки, которая появляется при увеличении содержимого – скрыта “подвалом”. Получается совсем некрасиво :(
2007-01-15 at 6:38 pm
RE: Арина
Это касательно которого варианта и в каком броузере?
2007-01-23 at 11:45 am
Вариант №1:
Mozilla Firefox 2.x – даже при незначительном контенте footer не попадает в ‘экран’, появляется вертикальная полоса прокрутки. Тоже самое и под Opera 9.x;
Под IE 6.0 все супер, вот только для #content добавить padding-bottom: 3em; чтоб footer не налазил на контент (как уже было отмечено).
Удачи!
2007-01-30 at 4:40 am
Помнится както пришлось повозиться с этим вопросиком… а тут гляди прям статьи в тему… Спасибо авторам)
2007-05-03 at 5:44 pm
мда… оба способа какие-то кривые…
у меня – некий гибрид
работает просто замечательно. совместим с XHTML, рендерится в режиме соответствия стандартам.
упомянутых тут глюков не замечено.
2007-05-06 at 6:49 pm
Большое спасибо за статью
2007-06-29 at 6:58 pm
Всем спасибо за статью
2007-10-05 at 5:51 pm
Блин, а посмотреть как люди верстают сайты влом?
http://infostore.org/user/vmr(см. сорцы) – футер всегда снизу, отображается во всех браузерах, не появляются полосы прокрутки, и никаких артефактов.
Все очень просто и элегантно. Но есть одно НО! – эта страница не является xhtml! (((
2007-10-19 at 3:08 pm
Вопрос в том как сделать футер для XHTML 1.1! Поделитесь мыслями.
2007-10-19 at 3:10 pm
спасибо за помощь в работе. использовала первый вариант. все отлично работает, одна проблема: в Opera при большом количестве текста в верхнем блоке этот текст начинает наезжать на футтер. помогите пожалуйста! как побороть?
2007-11-15 at 1:57 pm
А хотя б один из способов работает толково? Сам проверил… НЕТ!
2007-11-19 at 7:07 pm
Чем не годится вариант предложенный тремя постами ранее?
Просто создаем таблицу с height=100%, нижняя строка которой и еть футер
Приведенная выше ссылка отображается корректно во ВСЕХ браузерах
Кому не нравится что там много текста – то вот пожалуйста “укороченный” вариант
2007-11-20 at 4:25 pm
*vmr, жжёшь, кросавчег :) “Как люди верстают сайты” =) Учи матчасть – с чем связана “гонка” за CSS’ной бестабличной версткой.
Авторам статьи – спасибо, на практике не пригодилось, но почитать интересно было.
2007-12-15 at 3:49 pm
Второй способ вообще замечательный, работает в 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;
}
вот и все! Попробуйте этот способ, не пожалеете :)
2007-12-17 at 12:20 am
Код страницы в предыдущем сообщении:
header
Содержание страницы (разнообразные блоки)
footer
2007-12-17 at 12:27 am
Код страницы:
{
header
Содержжание страницы (разнообразные блоки)
footer
}
2007-12-17 at 12:32 am
Блин, не получается поделиться информацией :). Напишу так: после открывающего тега и идет открывающий тег блока content, потом блок header, под ним-блоки основного содержания страницы, потом блок content закрывается, т. е. блок content содержит в себе блоки хидера и все содержимое кроме футера; после идет блок футера, потом закрывается и . Все :)
2007-12-17 at 12:42 am
Блин, не получается поделиться информацией :). Напишу так: после открывающего тега html и body идет открывающий тег блока content, потом блок header, под ним-блоки основного содержания страницы, потом блок content закрывается, т. е. блок content содержит в себе блоки хидера и все содержимое кроме футера; после идет блок футера, потом закрывается body и html. Все :)
2007-12-17 at 12:43 am
как раз на footer сейчас остановился,
дают разные варианты – не работают в ie7 и последней опере,panda дали бы ссылку, где это у вас работает, действительно пробовал
нормальное определение body, ie7 не понимает: body {
height: 100%;
position: relative;
}
1и 2 условия наверное как раз и нехватает для работы схемы, попробую
http://aik.tu1.ru
2007-12-17 at 1:29 am
Первое условие КРАЙНЕ важно, без него у Вас вряд ли что получится. Способ 100% рабочий, без всяких скидок, проверен и перепроверен мной лично на трех проектах, другими людьми тоже. Если что – пишите, разберемся. Кстати, на основе этого шаблона я разработал шаблон сайта с тремя колонками в бестабличной верстке, на реальном проекте не тестил, но вроде получилось неплохо, во всех вышеуказанных браузерах работает можно сказать одинаково. ?нтересно-пишите.
2007-12-17 at 9:51 pm
Есть ли возможность при использовании этих способов прибить картинку на бэкграунде книзу.
Такая трабла, что при большом разрешении все в норме, но при маленьком картинка подпригивает в ФФ и Опере. Насколько понял это из-за
height:100%для html.Сколько не парился – ничего не получается.
Может кто знает ответ
2008-02-29 at 6:43 pm
Спасибо, мне очень пригодился тот способ, в котором у футера
height:Npx;
margin-top:-Npx;
Правда долго мучалась с хаками, но заработало :)
2008-03-09 at 1:05 am
А вот задачка такого содержания:
1) Футер прибит к низу, причём при переполнении контентом, он не перекрывает ничего.
2) Колонки одной высоты, и тянуться за переполнением контента.
3) При малом, наполнении основного блока, футер и всё содержимое отображаеться без прокруток, НО! колонки тянуться от хидера, до футера, без пустых пространств.
4) DOCTYPE – любой XHTML
P.S.: моими культями вышло только в Quirks Mode.
Проблема в IE6, этот броузер не хочет растягивать одну из колонок при указании DOCTYPE.
2008-03-31 at 6:57 pm
Подскажите как сделать чтобы футер был постоянно внизу при изменении размера окна и перекрывал основной контент, если его много.
2008-06-04 at 10:03 am
а зачем в первом примере использовать
* html #contentчтобы задать 100% высоту для ie, разве нельзя обойтись трюком с !important, также как во втором примере?2008-06-19 at 3:26 pm
А у меня на http://4x.at.ua всё прекрасно работает и если материала меньше и если больше чем размер экрана. Футер всегда внизу.
2008-07-05 at 7:30 pm
К чему все эти споры и рассужения?
Не проще ли использовать таблицу 100% высоты с двумя строчками, на верхней ширина 99%, на нижней строчке ширина 1%? Да, еще надо не забыть про ширину body 100% и доктайп, чтобы таблица растягивалась на все окно. ? всего делов, футер всегда внизу и количество контента погоду не сделает.
2008-08-29 at 8:47 pm