Загрузка. Пожалуйста, подождите...


реклама на сайте

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

Думаю, для многих 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 всегда было большой загадкой, то или иное решения чаще подсказывает интуиция, и не поддаётся какому-либо логичному объяснению. Хотя, если у вас есть обоснование решения описанной проблемы, пишите свои мысли в комментариях, с удовольствием почитаю. winked
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
.
Другие новости по теме:
Комментарии (2)

#1 написал:




Группа: Гости
Регистрация: --
Спасибо отличный материал
Публикаций: 0 | Комментариев: 0 цитировать    

#2 написал:




Группа: Гости
Регистрация: --
Спасибо. Вот за такие посты добавил ваш сайт в закладки.
Публикаций: 0 | Комментариев: 0 цитировать    
    Добавление комментария
 

Меню

Главная

Компьютерная помощь
Веб-мастерская
Ремонт ноутбуков
Восстановление данных
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (6)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (12)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (8)
*nix (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления
логин:
пароль: