Как правильно прижать «подвал» (футер) к низу страницы в IE
Опубликовано: 6 февраля, 2009 | Рубрика: Кодинг | Тэги: footer внизу страницы, баги, кодинг, причуды IE | 24 Комментариев »Думаю, что для многих 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 всегда было большой загадкой, то или иное решения чаще подсказывает интуиция, и не поддаётся какому-либо логичному объяснению. Хотя, если у вас есть обоснование решения описанной проблемы, пишите свои мысли в комментариях, с удовольствием почитаю.
Суперовый метод, спасибо огромное, очень помогло…я удивился, что есть всё таки решение для IE6…. ещё раз 10х))
Ну вот да действительно работает, НО, вы измените окно браузера, сделайте его поменьше, и посмотрите что будет, футер будет только в видимой части окна, если документ скролить вправо, то его не видно дальше, и такая проблема у большинства сайтов, сверстанных на дивах, и что тут делать? ява скрипт применять?
Скопировал и вставил в документ, в FF нормально работает, в IE 7 footer находится не в самом низу, если текст большой
http://vk.osvita.org.ua/footer.htm вот этот метод попробуйте
[b]ouea[/b], такой проблемы не наблюдаю. Увеличил шрифт свойствами css, затем свойствами браузера, «подвал» всё равно чётко прижат книзу.
Макс, интересное решение, надо будет потестить на предмет всяких неожиданностей.
Спасибо большое!!!
))
)
потратил море времени пока не наткнулся здесь на решение
Роман! Потрясающее решение. Но не для всякого динамического содержание это помогает, что ли…
Есть сайт – он использует выезжающюю панель на jQuery – и когда она выдвигается то содержимое все равно наезжает на футер.
может быть есть какое то решение для этой ситуации?
вот сайт zpmer.ru
Спасибо.
Piombo, попробуйте включить для блока с id=comContainer свойство hasLayout
Приветствую! Да так заработало, спасибо огромное! Правда не все указания на hasLayout одинаково полезны. У меня display:inline-block не заработало, получилось только при явном указании height:1%;
Piombo, я обычно применяю более безопасный метод zoom:1
Ну он не валидный вроде… Да и height:1%; у меня тока для ie6 применен…
В топку этот IE6… кто-нибудь вообще им еще пользуется?
К сожалению, да. Если верить статистике http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2, то более 20% пользователей всё ещё используют этого “уродца”. Слишком ещё высокий показатель, чтобы отказываться от его поддержки.
Как ни странно (Если верить GA) из всех посититиелей zpmer.ru – пользователей ie6 15-20%
Добавлю…. оч. вероятно, что допустим на webcocktail.ru ie6 не ходят из-за специфики… но у меня именно так.
15-20% все же не мало…………
Вот ещё вариант, работает во всех браузерах: http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/
K_E_V_in , а чем ваш вариант отличается от моего??
Лучше строку
body {height:auto !important; min-height:100%; height:100%; position:relative;}
заменить на
body {height:auto !important; min-height:99.9%; height:99.9%; position:relative;}
Это избавит от появления полосы прокрутки, когда ее быть не должно.
не очень понял для чего строка
body {height:auto !important; min-height:100%; height:100%; position:relative;}
вы пишете что > “В вышеописанной конструкции мы его используем просто как трюк для сокращения записи.”
как понять “сокращение записи” ??
буду Вам очень благодарен если ответете
Постараюсь более понятно и подробно выразиться, а то и впрямь немного путанно, а момент тут, что называется, “тонкий”.
Итак, почему такая странная конструкция body {height:auto !important; min-height:100%; height:100%;}
В этой строке мы указываем высоту для body. Сначала пишем правило height:auto — устанавливать высоту автоматически. Автоматически, значит высота будет зависеть от содержимого блока. Вообще-то, это значение уже и так установлено, оно является значением по-умолчанию. Но мы всё равно его укажем и ниже Вы поймёте почему.
Вторым правилом min-height:100%; мы отмечаем, что МИНИМАЛЬНАЯ высота должна равняться 100% от окна браузера. Таким образом, даже если на странице вообще нет ничего, то блок body всё равно растянется по высоте на все 100% и наш “футер”, найдя его нижнюю точку, прижмётся к ней.
А вот третье правило height:100%; пишется исключительно для устаревшей версии Internet Explore 6, эта версия не поддерживает min-height, а вот правило height в нём чудесным образом работает абсолютно также, как в нормальных браузерах min-height. Это один из многих “багов” IE6.
Теперь, нам нужно сделать так, чтобы современные браузеры не принимали во внимание последнее значение height:100%; Ведь как мы помним, если одно и тоже правило указано с разными значениями, то приоритет получит последнее, а предыдущие будут проигнорированы. Именно для этого мы указываем !important для нужного нам значения. А что же IE6? А это ещё один его баг ) Он всё равно будет читать последниее значение игнорируя !important.
Это “сокращённая запись”, в том смысле, что я указал в одном файле и в одной строке несколько противоречащих правил для разных браузеров и использовал хак. Но, обычно, я так не делаю. Я использую (и Вам рекомендую) сonditional comments для подключения дополнительных css стилей или css-файлов для разных версий IE. В этом случае будет всё выглядеть так
<style type=”text/css”>
body {min-height:100%; position:relative}
…
</style>
<!–[if IE 6]>
<style type=”text/css”>
body {height:100%;}
</style>
< ![endif]–>
Очень надеюсь, что не запутал Вас ещё больше. )
p.s У меня какой-то косяк с плагином BBCode, поэтому conditional comments немного неверно отобразились, но суть наверное Вы уловили.
Спасибо. Мне эта статья ооочень помогла.
сенкю