Как придавить подвал к низу экрана. Вариант 2

В описанной мною ранее версии мы использовали пустой блок по имени empty. Валидатор, как известно, весьма недружелюбно относится к пустым блокам. Поэтому веб-мастера ищут и находят более лояльные решения. Одно из таких я и хочу вам сегодня представить. Нашел я его на сайте cssstickyfooter.com (название говорит само за себя).

Принцип действия достаточно прост. Всей тушке задается высота в 100%. Подвал так же, как и раньше, отделен от основного контейнера, и ему задано относительное позиционирование (relative) и отрицательный отступ margin-top, равный высоте самого подвала. У основного же контейнера наоборот – задано нижнее поле padding-bottom на точно такую же высоту.

Все бы ништяк, но непослушный ослик IE не понимает правила вида:

{height: auto; min-height: 100%;}

Поэтому мы от него этот набор скрыли вот таким простеньким хаком:

body > #wrap {height: auto; min-height: 100%;}

Здесь запись body > #wrap означает, что блок wrap является прямым наследником тэга body. Все добропорядочные браузеры понимаю эту запись и следуют ей, игнорируя все остальное. Для IE мы прописали другой набор:

html, body, #wrap {height: 100%;}

Это он понимает и выполнит с радостью.

Остается лишь привести полный код страницы со стилями. Их (стили) я не стал выносить в отдельный файл, чтобы не размазывать сопли по тарелке. Думаю, все понятно и так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 50px;}
#footer {position: relative; margin-top: -50px; height: 50px; clear:both;}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<p>Здесь размещается основной контент. Причем без разницы, сколько колонок вы используете. Короче, здесь лежит контент. Все!</p>
</div>
</div>
<div id="footer">
<p>Подвал с мышами и бомжами :)</p>
</div>
</body>
</html>

На сайте авторов в оригинальной статье представлен расширенный код с использованием дополнительного хака под браузер Google Chrome. При желании можете сами поковырять его и добавить в ваш код. Называется этот хак Clearfix. Обратите внимание, что прикручен он в коде непосредственно к самому основному блоку в виде дополнительного класса:

<div id="main" class="clearfix">

21.08.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: