Содержимое сайта
Как правильно прижать «footer» к низу страницы |
автор: eddvrned | 10 января 2010 | Просмотров: 3867 |
Думаю, для многих web-мастеров уже не составляет труда сверстать страницу, где «подвал» будет прижат к её нижней границе. Вот метод который использую, подсмотренный уже не помню где.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Содержимое сайта Итак, несколько пояснений для новичков: для начала уберём (обнулим) все лишние отступы.
* { 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 добавит динамическое содержимое, но высоту документа пересчитывать не станет и позиция «подвала» не изменится, а значит содержимое «провалится». Чтобы этого избежать, нам понадобится дополнительный блок между содержимым и «подвалом», который будет как бы толкать его вниз страницы при изменении содержимого.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Поведение IE всегда было большой загадкой, то или иное решения чаще подсказывает интуиция, и не поддаётся какому-либо логичному объяснению. Хотя, если у вас есть обоснование решения описанной проблемы, пишите свои мысли в комментариях, с удовольствием почитаю. |
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
. |
Другие новости по теме: |
|
Комментарии (2) |
13 августа 2010 20:28 | ICQ: -- | | ||
|
||
|
31 января 2011 20:37 | ICQ: -- | | ||
|
||
|
Компьютерная помощь
Веб-мастерская
Ремонт ноутбуков
Восстановление данных
Заправка картриджей
HTML (1)
CSS (6)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (12)
ModX (1)
WordPress
Drupal (1)
Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее