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

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

 

< !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 добавит динамическое содержимое, но высоту документа пересчитывать не станет и позиция «подвала» не изменится, а значит содержимое «провалится».

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

 

< !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 всегда было большой загадкой, то или иное решения чаще подсказывает интуиция, и не поддаётся какому-либо логичному объяснению. Хотя, если у вас есть обоснование решения описанной проблемы, пишите свои мысли в комментариях, с удовольствием почитаю.

Меню

Главная

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

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

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


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

Not registered?