Время то времени, занимаясь проблемой footer-а, который всегда внизу, то есть при минимуме информации в области контента, страница всегда имеет сто процентную высоту без вертикальной прокрутки, а что делать, иногда это насущно необходимо.

Также, ко всему этому, как частный случай, рассматривается расположение header по html-коду ниже области контента и footer-а. Это связано с тем, что очень часто в состав header входит горизонтальное меню с многочисленными вложениями и чтобы добраться до содержания страницы приходится прокручивать страницу на пару-тройку экранов.

Особенно это не удобно, когда по каким-то причинам стилевой файл не был подгружен, да и без стилей все смотрится более или менее прилично.

В общем никаких компромиссов. Контент, информационная составляющая любой web-страницы, впереди планеты всей.

Ранее в касался этой проблемы, приводя не самую распространенную методику, позволяющую это сделать достаточно легко и просто.

Структура страницы приблизительно выглядит следующим образом:

  <div id="middle">
    <div class="wrap">… </div>
  </div>
  <div id="footer">… </div>
  <div class="header">
    <div id="header">… </div>
  </div>

Контейнер с классом header нужен, для того, чтобы абсолютно от позиционировать собственно сам header.

Контейнер с классом wrap служит для тех же целей, подготавливая место для header-а, а также позволяет создавать необходимую структуру области контента и колонок навигации, в данном конкретном случае, не рассматривается.

Стили описывающие поведение нашей разметки:

* {margin:0;padding:0;}
html,body {height:100%;}
body {background-color:#eee;position:relative;}
#middle,#header,#footer {margin:0 auto;width:930px;}
*html #middle {overflow:visible;height:100%;}
*html .wrap {zoom:1;}
#middle {
  background-color:#fff;
  border:#000 solid;
  border-width:0 1px;
  margin-top:-41px; /* height footer */
  min-height:100%;
}
.wrap {margin-top:151px;} /* height #header+#footer */
.header {position:absolute;top:0;left:0;width:100%;}
#header {
  background-color:#aaf;
  border:#000 1px solid;
  height:110px;
}
#footer {
  background-color:#eef;
  border:#000 1px solid;
}

Скриншот.

Опаньки, а что с OPERA? А почему собственно появился не запланированный отступ сверху и вертикальная прокрутка? Причем, это происходит в OPERA9.xx, FF2(3), IE8 beta2. Зато IE6 просто молодец.

Вопрос, даже не в том, кто прав, а что делать? Остановитесь, подумайте. Ответили? Нет, тогда читаем дальше.

Ответ на вопрос содержится в заголовке поста, да именно, указание стилевого правила:

body {position:relative;}

вводит в заблуждение крутые и продвинутые браузеры. А вот всенародно "любимый" IE6 на высоте.

Удаляем.

Скриншот.

Что-то опять не так. Вертикальная прокрутка и поверьте на слово, примеры само собой будут приведены, другие неприятности.

Поведение перечисленных выше браузеров аналогично.

Задавая тот или иной вопрос по ходу повествования, я знаю на него ответ, а вы сможете не заглядывая в стили тестовой страницы, имея только стили находящиеся чуть выше, сказать, чего не хватает браузерам проходящим самые навороченные тесты чуть ли не на ура?

Догадались? Если нет, то еще раз внимательно читаем заголовок поста.

Необходимо в стили добавить:

#middle,#header,#footer {overflow:hidden;}

Очередной скриншот.

Спасло ли это действо, положение? Нет вертикальной прокрутки уже плюс.

А если вернуть:

body {position:relative;}

Во как, часть header-а улетела вверх.

Отыграем назад.

Визуальные разночтения заметны.

Если поменять

.wrap {margin-top:151px;}

на

.wrap {padding-top:151px;} 

Картина поменяется на обратную:

Кто виноват, не известно, но вот что делать в данной ситуации?

Ответ ищем в заголовке.

Сместим акцент :

.wrap {border-top:151px solid;}

Вот теперь, полный фен-шуй.

По идее должно последовать заключение, выводы и рекомендации, но рассматривался частный случай из практики. Для себя завязал очередной узелок на память.

Переходим на страницу с примерами

P.S. Именно по этой методике прибивается footer к нижней границе окна браузера в одной из последующей частей цикла "Техника Gordi"