Продолжим, возможно, бесконечный сериал.

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

Использование стилевых правил:

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

Решает эмуляцию равной высоты колонок, позволяя задавать колонкам разный background-color (background:url(…)), но кроме проблемы не корректной работы меток-якорей есть и еще одна - нижний border, его-то простыми средствами никак не пристроишь, пример, где он явно указан, но визуально отсутствует.

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

Приведу только одно наблюдение, по любой из методик в прикручивании нижнего border’a, кроме как прорисовка solid, а нам-то этого мало, и то не идеальная, сводит, на нет все усилия.

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

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

Вот и давайте "закроем" проблему нижнего border’a раз и навсегда.

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

Что является основой блочно-модульной концепции "Техника Gordi"?

Это так многим, да и самому себе изрядно поднадоевший контейнер (кирпич), которому посвящена не одна страница блога, скоро потянет на книгу :), а именно блок middle со своей внутренней структурой, позволяющий простыми средствами получить, как минимум пять вариантов расположения колонок навигации относительно области контента.

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

Рассмотрим решение проблемы нижнего border’a на основе стандартной трех колоночной разметки.

<div class="middle">
  <div class="wrap">
    <div class="center">Middle Content</div>
    <div class="left">Middle Left</div>
    <div class="right">Middle Right</div>
  </div>
</div>

html-код ставший классикой для подобного рода публикаций.

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

<div class="footer">
  <div class="wrap">
    <div class="center height"></div>
    <div class="left height"></div>
    <div class="right height"></div>
  </div>
</div>

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

В заключении приведу один из вариантов полноценной страницы.

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

P.S. Предложенное решение актуально и для фиксированных блоков на web-странице, но об этом в следующий раз.