Как правильно прижать «footer» к низу страницы в IE

Опубликовано: 6 февраля, 2009 | Рубрика: Кодинг | Тэги: , , , | 20 Комментариев »

Думаю, что для многих web-дизайнеров уже не составляет труда сверстать страницу, где «подвал» будет прижат к её нижней границе. Вот метод который использую я, подсмотренный уже не помню где.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{ margin:0; padding:0; }
 
html {height: 100%;}
body {height:auto !important; min-height:100%; height:100%; position:relative; }
#content { background:#ccc;}
#footer {position:absolute; bottom:0; width:100%; background:red}
</style>
</head>
 
<body>
<div id="content">
<p>Содержимое сайта</p>
</div>
 
<div id="footer">
«Подвал» сайта прижатый к низу
</div>
</body>
</html>

Итак, несколько пояснений для новичков: для начала уберём (обнулим) все лишние отступы.

* { margin:0; padding:0;}

Далее укажем, что высота html должна быть 100% от высоты браузера.

html {height: 100%;}

Для body устанавливаем высоту равную высоте содержимого страницы, но как минимум это должно составлять 100%. А также зададим относительное позиционирование для body, ведь именно относительно него будет позиционироваться “подвал”.

body {height:auto !important; min-height:100%; height:100%; position:relative; }

Вот эта строка {height:auto !important; min-height:100%; height:100%;} может кого-то из новичков запутать, но ничего страшного тут нет. В Internet Explorer, height работает также как в нормальных браузерах min-height. Правило !important, опять же, повысит приоритет стилевого параметра для тех браузеров, которые его понимают, а IE обработает последнее, указанное в конструкции. Это ещё один весёлый такой «косяк» всенародного браузера от Microsoft.
В вышеописанной конструкции мы его используем просто как трюк для сокращения записи. Вообще-то, я всё же рекомендую выносить стилевые правила для IE в отдельный css-файл, подключенный с помощью “сonditional comments”.

Наконец, задаём абсолютное позиционирование для подвала и указываем координаты.

#footer {position:absolute; bottom:0;}

Вроде ничего сложного. Однако, как всегда есть некоторые нюансы.

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

В этом случае, всеми любимый Internet Explorer добавит динамическое содержимое, но высоту документа пересчитывать не станет и позиция «подвала» не изменится, а значит содержимое «провалится».

Для того чтобы этого избежать, нам понадобится дополнительный блок между содержимым и «подвалом», который будет как бы толкать его вниз страницы при изменении содержимого.

1
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

 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
* { margin:0; padding:0; }
html {height: 100%;}
body {height:auto !important; min-height:100%; height:100%; position:relative;}
#content { background:#ccc;}
#footer {position:absolute; bottom:0; width:100%; background:red}
#dynamic-block {width:100%; height:800px; display:none; background:green; }
#pusher {clear:left; float:left; height:0; }
</style>
</head>
 
<body>
<div id="content">
<p>Содержимое сайта <a href="#" onclick="document.getElementById('dynamic-block').style.display = 'block';">
показать скрытый блок
</a></p>
<div id="dynamic-block"></div>
</div>
 
<div id="pusher"></div>
<div id="footer">
«Подвал» сайта прижатый к низу
</div>
</body>
</html>

Признаться, решение этой проблемы было найдено мною давно методом «тыка». Поведение IE всегда было большой загадкой, то или иное решения чаще подсказывает интуиция, и не поддаётся какому-либо логичному объяснению. Хотя, если у вас есть обоснование решения описанной проблемы, пишите свои мысли в комментариях, с удовольствием почитаю.

чушьничего интересногомогло быть лучшеочень интересноотлично!
Может вам будет также интересно:

20 Комментариев на “Как правильно прижать «footer» к низу страницы в IE”

  1. 1 Олег  (23 июля, 2009 в 10:23) :

    Суперовый метод, спасибо огромное, очень помогло…я удивился, что есть всё таки решение для IE6…. ещё раз 10х))

  2. 2 Макс  (16 августа, 2009 в 20:24) :

    Ну вот да действительно работает, НО, вы измените окно браузера, сделайте его поменьше, и посмотрите что будет, футер будет только в видимой части окна, если документ скролить вправо, то его не видно дальше, и такая проблема у большинства сайтов, сверстанных на дивах, и что тут делать? ява скрипт применять?

  3. 3 ouea  (25 августа, 2009 в 07:29) :

    Скопировал и вставил в документ, в FF нормально работает, в IE 7 footer находится не в самом низу, если текст большой

  4. 4 Макс  (25 августа, 2009 в 08:49) :

    http://vk.osvita.org.ua/footer.htm вот этот метод попробуйте

  5. 5 Роман  (25 августа, 2009 в 09:45) :

    [b]ouea[/b], такой проблемы не наблюдаю. Увеличил шрифт свойствами css, затем свойствами браузера, «подвал» всё равно чётко прижат книзу.

  6. 6 Роман  (28 августа, 2009 в 10:15) :

    Макс, интересное решение, надо будет потестить на предмет всяких неожиданностей.

  7. 7 шурик  (1 октября, 2009 в 22:22) :

    Спасибо большое!!! :) ))
    потратил море времени пока не наткнулся здесь на решение :) )

  8. 8 Piombo  (7 октября, 2009 в 18:28) :

    Роман! Потрясающее решение. Но не для всякого динамического содержание это помогает, что ли…

    Есть сайт – он использует выезжающюю панель на jQuery – и когда она выдвигается то содержимое все равно наезжает на футер.

    может быть есть какое то решение для этой ситуации?

    вот сайт zpmer.ru

    Спасибо.

  9. 9 Роман  (8 октября, 2009 в 11:12) :

    Piombo, попробуйте включить для блока с id=comContainer свойство hasLayout

  10. 10 Piombo  (8 октября, 2009 в 15:40) :

    Приветствую! Да так заработало, спасибо огромное! Правда не все указания на hasLayout одинаково полезны. У меня display:inline-block не заработало, получилось только при явном указании height:1%;

  11. 11 Роман  (8 октября, 2009 в 15:46) :

    Piombo, я обычно применяю более безопасный метод zoom:1

  12. 12 Piombo  (8 октября, 2009 в 15:50) :

    Ну он не валидный вроде… Да и height:1%; у меня тока для ie6 применен…

  13. 13 Макс  (9 октября, 2009 в 09:51) :

    В топку этот IE6… кто-нибудь вообще им еще пользуется?

  14. 14 Роман  (9 октября, 2009 в 10:21) :

    К сожалению, да. Если верить статистике http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2, то более 20% пользователей всё ещё используют этого “уродца”. Слишком ещё высокий показатель, чтобы отказываться от его поддержки.

  15. 15 Piombo  (9 октября, 2009 в 10:23) :

    Как ни странно (Если верить GA) из всех посититиелей zpmer.ru – пользователей ie6 15-20%

  16. 16 Piombo  (9 октября, 2009 в 10:24) :

    Добавлю…. оч. вероятно, что допустим на webcocktail.ru ie6 не ходят из-за специфики… но у меня именно так.

  17. 17 Макс  (9 октября, 2009 в 20:48) :

    15-20% все же не мало…………

  18. 18 K_E_V_in  (13 февраля, 2010 в 01:02) :

    Вот ещё вариант, работает во всех браузерах: http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/

  19. 19 Роман  (15 февраля, 2010 в 14:40) :

    K_E_V_in , а чем ваш вариант отличается от моего??

  20. 20 ZooY  (16 мая, 2010 в 19:14) :

    Лучше строку
    body {height:auto !important; min-height:100%; height:100%; position:relative;}
    заменить на
    body {height:auto !important; min-height:99.9%; height:99.9%; position:relative;}
    Это избавит от появления полосы прокрутки, когда ее быть не должно.

Есть мнение? Высказывайтесь!