Lumber room
21 April 2008

Выравнивание высоты контейнеров при верстке DIVами

Думаю, что все, кто осознал все преимущества верстки слоями перед табличной разметкой, не смог не обратить внимания на один, как по мне, существенный недостаток блочной модели. Что это? Это высота контейнеров.Работая над очередным проектом, я перепробовал несколько вариантов решения данной проблемы, с которыми и хочу познакомить вас в рамках этой статьи.
К сожалению, если мы будем использовать трех- или двухколоночный макет сверстанный «слоями», то в итоге высота контейнеров будет совершенно независима от высоты соседних блоков. И будет напрямую зависеть от контента блока и примененных к нему правил отступа (padding). Несмотря на все свои недостатки, таблицы, как бы сами по себе, решают этот вопрос в силу связности соседних колонок. В случае же использования блоков мы имеем на выходе совершенно независимые контейнеры.
table_layout.png
Пример страницы
с табличной версткой
div_layout.png
Пример верстки “слоями”

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

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

Использование исключительно CSS


Итак, первый способ называется «Ложные колонки» и суть его очень проста и банальна. Очень хорошее описание этого метода можно найти в статье Дена Седерхольма Faux Columns. Согласно этому примеру используется фоновое изображение, к которому применяется повторение по вертикали, и в итоге получается эффект одинаковой высоты колонок.
Вот пример CSS:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
Данный вариант хорошо подходит для страниц с фиксированной шириной. Его также его можно использовать и для «резиновой» верстки с применением метода адаптированного Дугласом Бауменом и Эриком Майером Sliding Faux Columns.
Суть его заключается в том, что сначала высчитывается пиксельное соотношение ширины колонок при разном разрешении, потом все это переводится в проценты, а после фоновому изображению, которое создает иллюзию колонки, присваивается позиционирование в процентах, согласно рассчитанных данных.
Прием можно использовать как для двух, так и для трех колонок, только в случае трех колонок нужно добавить еще один вложенный контейнер в разметку.
Огромный плюс этого приема — это чистый CSS. Однако он хорош, тогда когда в концепции вашего дизайна применяются прямые границы контейнеров. Но, к сожалению, данный прием нельзя применить к дизайну, блоки в котором имеют скроенные (закругленные) углы.

CSS+Js


В случае же использования закругленных углов я никак не смог обойтись без использования javasript.
Есть много вариантов скриптов, для решения проблемы высоты колонок. Я остановил свой выбор на трех скриптах, которые можно использовать в разных решениях при различных задачах.
  1. CSS Equal Columns Height script (v1.01) — дословно скрипт равной высоты колонок

Откопал я его в закромах www.dynamicdrive.com он широко применяется в рамках готовых базовых разметок, которые представлены на сайте в качестве шаблонов.
Применяется он очень просто. Нужно скопировать сам скрипт equalcolumns.jsсебе в директорию скриптов, либо в директорию, которую вы используете для этого у себя на сайте. А потом прописать ссылку на скрипт в коде страницы между :

Для того чтобы скрипт работал именно в вашем макете нужно изменить базовые настройки в самом файле скрипта вот здесь:
ddequalcolumns.columnswatch=[”leftcolumn”, “rightcolumn”, “contentwrapper”]
Соответственно “leftcolumn”, “rightcolumn”, “contentwrapper” — меняем на названия ваших стилей.
Тестировал лично, в итоге получил результат полной поддержки в FireFox 1.0 и выше, Opera от 7 версии и Safari. К сожалению, в IE6-7 был замечен очень странный баг обрезки футера. Вернее футер присутствовал, но его нельзя было зафиксировать в рамках видимой области окна браузера, всегда появлялась прокрутка +размер футера. Однако, тестировал я это на одной только модели верстки и вполне возможно, что при другом варианте позиционирования контейнеров данной ошибки не будет. Попробуйте сделать это на своих разметках.
  1. PVII Equal Height CSS Columns — в принципе тоже название только от других разработчиков и с другим вариантом скрипта.

Принцип внедрения скрипта стандартный — между тегами вашего кода вставляете ссылку на скрипт:

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

Запрос onLoad содержит выбор включения скрипта (1=yes, 0=no) а также список переменных, гдеc1 — это название класса или id контейнера к которому применяется скрипт, P — это конечный селектор который используется в данном контейнере.
В примерах на самом сайте разработчиков все работает замечательно. Однако применительно к динамической модели назначение конечного селектора не всегда привлекает, причем конечный селектор может изменяться. Как вариант, вставлять этот селектор непосредственно в разметку. Но в целом, применительно к той разметке, на которой испытывался первый скрипт, этот не сработал. Опять же отмечу, что на обычной статике скрипт должен работать — экспериментируйте.
И наконец, третий варрант. Который, лично мне, показался наиболее привлекательным и оказался работоспособным в пределах тестовой разметки на 100%.
  1. Скрипт выбора максимальной высоты контейнера с добавлением .class, как аргумента от Djamil Legato и Andy Miller

В принципе вот сам скрипт:
var maxHeight = function(classname) {
var divs = document.getElements('div.' + classname);
var max = 0;
divs.each(function(div) {
max = Math.max(max, div.getSize().size.y);
});
divs.setStyle('height', max);
return max;
}
window.addEvent('load', function() {
maxHeight('sameheight');
maxHeight.delay(500, maxHeight, 'sameheight');
});<code/>

’sameheight’ — это как раз и есть название того класса, который используется в качестве аргумента. Естественно его можно назвать как вам угодно.
Примечательно, что, несмотря на свою простоту, скрипт работает во всех браузерах без проблем. Единственное условие — это добавление класса-аргумента для двух контейнеров того, которому нужно назначить высоту и того, с который служит эталоном высоты. Причем эталон высчитывается автоматически по самому высокому контейнеру из двух с присвоенным классом. Поистине — все гениальное просто.
Думаю, что это не все из возможных вариантов решения проблемы равной высоты контейнеров, но эти приемы мне показались наиболее юзабельными. Буду рад услышать ваши предложения решения этой проблемы.
Кросспост из моего блога master-web

+15
1k 48
Comments 62
Top of the day