В описанной мною ранее версии мы использовали пустой блок по имени 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">
replica watches for sale и еще раз сыграть в азартные игры онлайн
Благодарю за информацию!
Пригодилась
Ответить