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

Как придавить подвал сайта к низу экрана. Вариант 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!

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

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

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

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