Не искусства ради или спортивного интереса…
Пусть не всегда, но цель оправдывает средства, применяемые для ее достижения.
Стоит ли говорить, что body практически никогда не выступает в качестве полноценного контейнера и достаточно редко используется в разметке на полную катушку.
Обойдемся без риторических вопросов, а почему собственно…
Давайте, просто сделаем это.
Итак.
<body>
<div id="header">Header</div>
<div id="middle">
<div class="content">Content</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div id="footer">Footer</div>
</body>
Классическая, хрестоматийная разметка web-страницы в моем понимании, ничего лишнего. Кто-то может думать иначе, но тогда ему и путь-дорога на другие ресурсы, где популярно расскажут и возможно даже покажут, почему так делать нельзя.
Что нам до них, попутного ветра дорогие товарищи :)
Посмотрим стили:
* {margin:0;padding:0;}
html,body {height:100%;}
body {
background-color:#eee;
margin:0 auto;
min-width:910px;
max-width:960px;
}
*html body {
width:expression(
document.documentElement.clientWidth < 910 ? '910px':
(document.documentElement.clientWidth > 960 ? '960px':'auto'));
zoom:1;
}
*html #middle {overflow-y:visible;height:100%;}
#middle,.content,.left,.right {overflow:hidden;}
#middle {
border:#00f solid;border-width:0 1px;
margin-top:-202px; /* height header+footer */
padding:0 200px;
min-height:100%;
}
.content,.left,.right {
float:left;
margin-top:202px; /* height header+footer */
margin-bottom:-32767px;
padding-bottom:32767px;
}
.content {background-color:#fff;margin-right:-100%;width:100%;}
.left {background:#ee9;margin-left:-200px;width:200px;}
.right {
background:#9dd;
float:right;
margin-right:-200px;
width:200px;
}
*html .right {margin-right:-100px;}
#header {
background-color:#cce;
border-top:#00f 1px solid;
height:100px;
}
#footer {
background-color:#e9e;
border:#00f solid;
border-width:0 1px 1px;
clear:both;
height:100px;
}
На что следует обратить внимание.
Сто процентная высота страницы с включением header и footer, где footer всегда расположен у нижней границы окна браузера, при минимуме информации в любой из колонок.
Реализовано это следующим образом.
Для контейнера middle задается отрицательный верхний отступ в сумме равный высоте header и footer, выделено зеленым. Тем самым мы поднимаем страницу вверх.
Далее для того, что освободить место для улетевшего в облака :) header-а и поставить его на отведенное ему место, колонкам центральной части назначается тот же верхний отступ, но уже с положительным значением, выделено, синим цветом.
Если есть необходимость в горизонтальных border-ах, отделяющих друг от друга header, middle и footer, а их появление приведет к появлению минимальной вертикальной прокрутки, нужно просто просуммировать их количество с их толщиной и добавить полученный результат к отступам речь, о которых шла в предыдущем абзаце.
Вот собственно и все.
Сегодня исключение из правил, пример всего один, но сделать макеты с различным расположением колонок навигации относительно области контента, очень просто, достаточно посмотреть примеры (вариант № 1) к предыдущему посту.
Горизонтальный banner counters.php - width:494px;