Как придавить подвал сайта к низу экрана. Вариант 2
В описанной мною ранее версии (ссылка) мы использовали пустой блок по имени empty. Валидатор, как известно, весьма недружелюбно относится к пустым блокам. Поэтому веб-мастера ищут и находят более лояльные решения.
Одно из таких я и хочу вам сегодня представить.
Принцип действия достаточно прост. Всей тушке задается высота в 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>
Enjoy!
