Как с помощью CSS прижать footer к низу окна браузера
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.
Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.
В процессе практики я выделил для себя 2 удобных способа прижимания футера к низу окна браузера с помощью CSS.
Первый способ
Footer прижимается вниз за счет его абсолютного позиционирования относительно элемента body и вытягивания высоты контейнеров html и body на 100%.
HTML-код:
1 2 3 4 5 6 7 8 9 | <html> <body> <div id="content"></div> <div id="footer"></div> </body> </html> |
CSS-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | * { margin: 0; padding: 0; } html {height: 100%;} * html body {height: 100%;} body { min-height: 100%; position: relative; } #content { padding-bottom: 100px; } #footer { position: absolute; bottom: 0; height: 80px; } |
Как видите, в данном примере используется CSS-хак для Internet Explorer ниже 7-й версии, который не знает правило min-height. Есть другое хитрое решение, которое может быть альтернативой хаку.
CSS-код в этом случае будет следующий:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | * { margin: 0; padding: 0; } html {height: 100%;} body { height: auto !important; height: 100%; min-height: 100%; position: relative; } #content { padding-bottom: 100px; } #footer { position: absolute; bottom: 0; height: 80px; } |
Параметры высоты, заданные для тега body, должны быть написаны именно в такой последовательности, как указано в примере.
В ряде случаев со сложной версткой, использующей множество вложенных тегов, браузер Opera может не подчиниться правилам из приведенного выше примера, т.е. в результате при длинном тексте футер остается как бы зависшим на своем месте и наползает на текст.
Честно сказать, я так и не смог понять, в чем причина этого явления. Но данный трабл решается применением дополнительного CSS-кода:
1 2 3 4 5 6 7 | #content:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } |
Второй способ
Footer прижимается вниз за счет вытягивания блока контента на всю высоту окна браузера и подъема футера вверх через отрицательный отступ для избавления от появляющегося при этом вертикального скролла. В данном случае нужно обязательно указывать высоту подвала.
HTML-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <body> <div id="content"> <div id="text"></div> </div> <div id="footer"></div> </body> </html> |
CSS-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | * { margin: 0; padding: 0; } html, body {height: 100%;} #content { position: relative; min-height: 100%; } * html #content { height: 100%; } #text { padding-bottom: 100px; } #footer { position: relative; height: 80px; margin-top: -80px; } |
При этом способе контент приходится вкладывать в дополнительный тег, для того, чтобы уже к нему применить нижний отступ. Если бы мы использовали для текста только один контейнер <div>, задали бы ему высоту 100% и добавили отступ снизу, то появился бы вертикальный скролл, чего нам необходимо избежать.
Ну и аналогично, взамен хаку для IE, можно использовать альтернативную запись с параметрами высоты.
* * *
Фрилансеров в Рунете сегодня существует превеликое множество, но не каждого можно назвать состоявшимся. Одним из успешных фрилансеров является автор блога о работе и не только, который зарабатывает деньги программированием и делится опытом на своем блоге.
Делал тему на WP
по книге Игоря Квентора
http://www.websovet.com/my-books#book2
нормально не работал рецепт, скажу сразу что все не пробовал,
а пользовался рекомендациями с книги.
Все заработало великолепно после того как внизу стилей дописал:
.clearfloat{
clear: both;
}
Заработало чудесно и настроение улучшилось :)
http://www.youtube.com/watch?v=eQO9w6qGA-w
СГ АМ,
работает не корректно. вот из-за таких статей коими наполнен весь инет и теряется драгоценное время(((
Все эти рапрекрасные способы нифига не работают нормально с динамическим контентом, в частности, с той же Джумлой. Практически на всех браузерах футер уезжает х.з. куда при изменении размера окна, иногда и при окне на весь экран.
Дима, вопрос может показаться глупым, но как поместить главное (горизонтальное) меню на его законное место. Всю голову сломал. Всё попробовал. Подскажите плиз!
Все ребята работает, залез сюда чтобы вспомнить как это делается )
Не работает с динамическим контентом )))))) оч смешно. Код кривой не надо писать, чтобы теги незакрытыми оставались в плагинах всяких и все ок будет.
p.s.Joomla отстой
не понравился ни первый ни второй способ, как то все слишком сложно =\
как оказалось чтобы прижать футер к низу достаточно прописать в футере
2
3
margin:0;
overflow:hidden;
по крайней мере у меня работает, пример смотреть здесь http://photoshoptemplates.ru/
Смешно) Вы похоже не поняли главного: в вашем примере “футер” не прижат к низу. Он просто находится после содержимого страницы. Удалите, к примеру, всё содержимое, кроме “шапки” и увидите где будет ваш “футер”. Задача как раз и состояла в том, чтобы при ЛЮБОМ количестве содержимого на странице (даже при его отсутствии) подвал всегда находился бы внизу окна. Поэтому “всё так сложно” )
А я просто хочу поблагодарить автора за внятное, работающее howto. Спасибо. Самокоронованные обсиральщики могли бы и промолчать.
Попробовал 2 способа, пошаманил чутка, футер всегда прижат к “полу” браузера ) Спасибо
Взял копипастом код второго варианта - он НЕ работает в FF, Opera и IE8. Везде одна и та же проблема - футер находится действительно внизу экрана, но если в див контент добавить контент, который длиннее экрана, то футер остается при прокрутке именно там, где пофвился в самом начале, а дальше идет контент.
мой код:
2
3
4
5
6
7
8
9
10
11
<div id="content">
<div id="header">
</div>
<div id="main_l">
</div>
<div id="main_r">
</div>
</div>
<div id="footer"></div>
</body>
css:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body {
font-family: Tahoma, Geneva, sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 14pt;
color: #423c2a;
background-color:#c0b67e;
}
#content {
position: relative;
min-height: 100%;
margin-left:auto;
margin-right:auto;
width:1200px;
background-color:#e8e1bc;
background-image:url(../images/top_bg.png);
background-position:top;
background-repeat:no-repeat;
}
* html #content {
height: 100%;
}
#footer {
position: relative;
height: 64px;
margin-top: -64px;
width:100%;
background-color:#000;
}
#header {
height:554px;
background-image:url(../images/header_bg.png);
background-position:bottom;
background-repeat:no-repeat;
}
main_l и main_r просто высота например 800px и фоновая заливка чтобы потетстить.
Если брать просто приведенный во втором варианте код - то все корректно, но если добавить хоть чтото в див контент то структура разваливается
Протестировал ваш код - описанной вами проблемы не наблюдаю, у меня работает, как надо.
Второй способ проверил под всем работает на ура только с 8 ослом косяк припоставил страницу обрабатывать как 7 ослик все ок стало
Для тех кто незнает всравляем в head
Прочитал, ничего не понял :(. Давно уже хочу прижать футер к низу страницы в своем блоге, но не знаю, как это правильно сделать. Может подскажите? Прям на пальцах для чайника. Буду премного благодарен :). Сайт: http://www.eb-school.ru , сделан на Blogger.
Согласен.
Что-то не получается у меня ничего. Или я что-то неправильно делаю, но что именно понять не могу. В общем когда вставляю в DIV “content” другой DIV и задаю ему высоту, скажем, 2000px, то футер так и остается на прежнем месте (т.е. уже не внизу страницы) Вообще как именно нужно вставлять данные в слой content? Может в этом загвоздка?
А меня просто задолбали огромные CSS коды и я написал javascript код, который делает прижатие без использования CSS. Работает даже при высоте страницы от 1 до 1 000 000 пикселей. Вот ссылка javascript прижатие футера.
Идея скрипта: если сумма высот блока с контентом и футера меньше высоты клиентской части окна - плавающему блоку присваиваем высоту: клиентская высота дисплея - (высота блока контента + футер).
Иначе - просто задаём высоту плаваюшего блока в, например, 20 пикселей.
Автору спасибо. Все заработало.
А криворуким, которые не могут настроить нормально и орут “не получается” - лучше не позорьтесь.
Кто писал про джумлу - все там работает, просто шаблон надо делать прямыми руками. И с динамическим содержанием тоже прекрасно работает.
А если у меня выключен js, то как себя ведет футер? И смысл нагружать js, если можно сделать более простым css
видимо руки вырастил не с того места.
Первый способ заработал, при том на странице элементы, которые могут менять высоту… И ничего не плывет..
Спасибо автору все работает. У меня вопрос по второму способу. Обязательно ли для блоков #footer и #content свойство
. У мня и без него все заработало.
Я уже и не помню, для чего добавлял это свойство. Если без него нет проблем, тогда можно и не использовать.
не понравился ни первый ни второй способ, как то все слишком сложно =\
как оказалось чтобы прижать футер к низу достаточно прописать в футере
ааааааааааааа!!!!!!! спасибо, работает! (у как я мучалась…)
Зачем так сложно?
Разве так недостаточно?
2
3
4
position: absolute;
bottom: 0;
}
Все работает нормально. Проверил на опере, лисе и осле.
Сразу видно неопытного и непрозорливого верстальщика ))
Прижмете вы абсолютно футер высотой в 100пх к низу экрана, ок. А что делать с тем, что он перекрывает на 100пх зону контента?
истину глаголишь, тезка :) вставил clearfloat и сразу перестало все плыть :)
Верно)
Моя оплошность)
Добрый день. Почитал я коменты и дивлюсь нашим современным веб прогерам, на ком же инет держится.
Все у них плывет в джумле. Вот мой совет; - “а вы не используйте джумлу ;-)”
clear:both; исспользуют и радуются…. Ужас. Используйте вы overflow:hidden; и не плодите лишних сушностей.
Вот ответ на один из постов:
position: relative; во втором способе для ie6.
З.ы. я лично зашел сюда, потому что забыл последовательность указания высот в 1.2 способе, которым я только и пользуюсь.
В моём видении, лишний <div id=”wrapper выглядит убого. Есть ли способы хитрее?
Спасибо огромное, добрый человек!
Первый способ пригодился.
Я только использовал
для футера
(кто еще в танке поясню! если высота футера 50px то нужно писать в margin-top: -50px)
а для контейнера я использовал
И все получилось!