Мираж, иллюзия - все бред, 
 Но каждый раз - опять и снова,
 Изобретать велосипед,
 Мне надоело, честно слово…
Gordi

Может сложиться ошибочное впечатление, что автор насмотревшись бесконечных сериалов, не смотрю и вам не советую, сам пошел по этому пути и все его посты сплошной длинный и наверняка местами весьма глупый сериал.

Поверьте, никоим образом не заставляю вас построить, скажем, "Дом-2", и уж никак на роль отца-командира не гожусь, есть более подходящие для этих целей персонажи, как в том же реалити-шоу. С таким блеском виртуозно строить и разводить малочисленное без башенное воинство, да и как не печально многочисленную телеаудиторию, тоже уметь надо. Отдадим должное сценаристам создавшим "убойный" сюжет. С креативом у них все в порядке, жаль что он принимает столь убогие, уродливые формы.

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

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

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

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

Первым делом, необходимо заставить наши слои, которые могут иметь любую ширину и обладая max-width находиться строго по центру с равными отступами от вертикальных границ окна браузера или же занимать все доступное место в том же самом окне. Наличие min-width, предусмотрено в обоих случаях.

В каком-то смысле, довольно простая и вполне тривиальная задача. Но все осложняется переносом блока header ниже контейнера middle по html-коду. Краткое описание, как это сделать вы найдете в первой части цикла.

Остановимся на этой части, "иллюзии идеала", более подробно.

Используемый прием, почему-то очень редко встречается на практике. Хотелось бы сказать: "это придумал я", тем более что в таком контексте, лично мне, он не встречался, но наверняка найдется некто, кто заявит, нет дорогой товарищ, ошибочка вышла – вот здесь и гораздо раньше, все это было, плохо искали и т.д. и т.п.

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

"Знания, помноженные на труд в купе с постоянной практикой и туже изобретательность…", с полным основанием можно занести одним из пунктов в манифест верстальщика. Прямая аналогия и вполне уместная.

Собственно, авторство на тот или иной прием верстки не является самоцелью, и по большому счету это не так уж важно. А вот ценность и необходимость оного приема не ограничивается только этим случаем, он может понадобиться тогда, когда полноценное абсолютное позиционирование по каким-то причинам применено быть не может.

Повторим общий html-код нашей страницы:

  <div id=”middle”>CONTENT</div>
  <div class=”header”>
    <div id=”header”>HEADER</div>
  </div>
  <div id=”footer”>FOOTER</div>

Теперь наступило время стилей и пояснений к ним.

css

* {margin:0;padding:0}
body {background-color:#eee;padding-top:130px;min-width:720px;max-width:900px;}
body,#header,#middle,#footer {position:relative;margin:0 auto;}
.header,#header,#middle,#footer {overflow:hidden;}
.header {position:absolute;top:3px;left:0;width:100%;height:130px;}
#header {background-color:#eee;border:#000 1px solid;height:125px;}
#middle {background-color:#fff;border:#000 1px solid;border-top:0;}
#footer {background-color:#ccc;border:#000 1px solid;border-top:0;height:40px;}

*html body {width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );}
*html #middle,*html #header,*html #footer {width:expression( documentElement.clientWidth > 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth >900 ? "900" : "auto") : "900px") : "auto" );}
*html #middle {overflow:visible;height:1%;}

Итак, все предельно просто.

Правила перечисленные в строках:

body {min-width:720px;max-width:900px;}
body,#header,#middle,#footer {margin:0 auto;}

центрирует указанные блоки с зданием максимальной и минимальной ширины. Это для тех браузеров, которые понимают.

Для IE6 все решается указанием ширины через width:expression к body - min-width и контейнерам #middle,#header,#footer - max-width, что стоят под звездным хаком.

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

Остальные стилевые правила в пояснениях, на мой взгляд, не нуждаются. Там, где проставлены размеры и цвет, вы можете менять все по своему усмотрению. Не забывая о разнице высот блоков .header,#header. Ну и .header {width:100%;} обязательный параметр. Пример.

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

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

html,body {height:100%;}
#middle {min-height:100%;height:auto! important;height:100%;}

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

Поэтому в заключительном варианте, фишки "footer который всегда внизу" не будет.

Свое отношение по этому поводу не однократно высказывал, повторяться нет смысла, добавлю лишь, один рекламный небоскреб размерами 160*600 в боковых колонках, решает эту проблему на ура. А если там еще и меню? В общем, не забивайте себе голову подобными глупостями, оно того не стоит.

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

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

Собственно на этом можно было бы и закончить. Но впереди разговор о не менее интересном блоке middle.

Продолжение следует.

Сериал, так сериал :)