14 марта 2009, 16:36

Отдай body все и немного больше…

Не искусства ради или спортивного интереса…

Пусть не всегда, но цель оправдывает средства, применяемые для ее достижения.

Стоит ли говорить, что 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) к предыдущему посту.

Комментариев: 4