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

То, что предлагается вам сегодня не является моим изобретением, в каком-то смысле это компиляция довольно известных приемов, другое дело, интеграция в озвученную мной концепцию "Техники Gordi", поэтому ничего лучше, чем название "Footer Cordi", увы, не придумано :)

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

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

О том, как опустить header ниже области контента уже рассказывалось, центральной части также посвящено несколько публикаций, в дальнейшем вам будет предложен еще один вариант блока #middle, но уже без использования

margin-bottom:-32767px;padding-bottom:32767px;

и речь там пойдет о разметке основанной на не менее интересном приеме создания иллюзии одинаковой высоты колонок, а именно "Holy Grail" с не замысловатым названием "Super "Holy Grail Gordi"".

Но об этом позже. Сегодня разговор о проблемах footer-а.

Все наши изыскания будут строиться на примере к комментарию № 10 по выше приведенной ссылке там, в принципе проблема footer-а решена, но сама страница не имеет сто процентной высоты и внимательный читатель при просмотре html-кода, мог бы обнаружить указания высоты меньше, чем 100%.

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

Собственно это и подвигло на продолжение экспериментов по поиску наиболее оптимального решения.

В двух словах описание проблемы.

<div id="middle>
  <div class="wrap">
    <div class="content"> MIDDLE Content</div>
  </div>
  <div class="right> MIDDLE Right</div>
  <div class="left> MIDDLE Left</div>
  </div>
<div class="header>
  <div id="header>Header</div>
</div>
<div id="footer">Footer</div>

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

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

Пришлось более серьезно подойти к решению поставленной задачи.

Итак, html-код "Footer-а Cordi":

<div id="middle">
  <div class="wrap">
    <div class="content">
      <div class="footbot">MIDDLE Content</div>
    </div>
  </div>
    <div class="right>
      <div class="footbot">MIDDLE Right</div>
    </div>
    <div class="left">
      <div class="footbot">MIDDLE Left</div>
    </div>
  </div>
  <div class="footer">
    <div class="footcontent">
      <div class="boxcontent”>Footer Content</div>
    </div>
    <div class="footleft">
      <div class="box">Footer Left</div>
    </div>
    <div class="footright">
      <div class="box">Footer Right</div>
    </div>
  </div>
  <div class="header">
    <div id="header">Header</div>
  </div>

Стили, описывающие нововведения:

  .footbot {padding-bottom:60px;}
  .footer {position:relative;}
  .footcontent,
  .footright,
  .footleft {position:absolute;top:-65px; }
  .footcontent {left:2px;right:2px;width:auto;}
  .footleft {left:2px;width:194px;}
  .footright {right:2px;width:194px;}
  .boxcontent,
  .box {background:#fff;height:60px;}
  .boxcontent {margin:0 203px;}
  .box {margin:0 auto;}

Пояснения:

Класс footbot общий для всех колонок блока #middle, и описываемые его стилями контейнеры, находящиеся в соответствующих колонках, готовят место для нашего footer-а.

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

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

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

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

Переходим на страничку с примерами.

Насколько универсальным окажется предложенное вам решение, покажет дальнейшая практика.

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

Простая трансформация из одного состояния в другое, в максимальной степени приближает нас к полной "Иллюзии идеала".

Комментарии для замечаний, как "за", так и "против" открыты.