Опубликовано автор в категориях Верстальщику.

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

К сожалению, если мы будем использовать трех- или двухколоночный макет сверстанный «слоями», то в итоге высота контейнеров будет совершенно независима от высоты соседних блоков. И будет напрямую зависеть от контента блока и примененных к нему правил отступа (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» себе в директорию скриптов, либо в директорию, которую вы используете для этого у себя на сайте. А потом прописать ссылку на скрипт в коде страницы между <head></head>:

<script src="ваша директория/equalcolumns.js" type="text/javascript"></script>

Для того чтобы скрипт работал именно в вашем макете нужно изменить базовые настройки в самом файле скрипта вот здесь:

ddequalcolumns.columnswatch=[«leftcolumn», «rightcolumn», «contentwrapper»]

Соответственно «leftcolumn», «rightcolumn», «contentwrapper» — меняем на названия ваших стилей.

Тестировал лично, в итоге получил результат полной поддержки в FireFox 1.0 и выше, Opera от 7 версии и Safari. К сожалению, в IE6-7 был замечен очень странный баг обрезки футера. Вернее футер присутствовал, но его нельзя было зафиксировать в рамках видимой области окна браузера, всегда появлялась прокрутка +размер футера. Однако, тестировал я это на одной только модели верстки и вполне возможно, что при другом варианте позиционирования контейнеров данной ошибки не будет. Попробуйте сделать это на своих разметках.

  1. PVII Equal Height CSS Columns — в принципе тоже название только от других разработчиков и с другим вариантом скрипта.

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

<script type="text/javascript" src="p7_eqCols2_10.js"></script>

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

<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">

Запрос onLoad содержит выбор включения скрипта (1=yes, 0=no) а также список переменных, гдеc1 — это название класса или id контейнера к которому применяется скрипт, P — это конечный селектор который используется в данном контейнере.

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

И наконец, третий варрант. Который, лично мне, показался наиболее привлекательным и оказался работоспособным в пределах тестовой разметки на 100%.

  1. Скрипт выбора максимальной высоты контейнера с добавлением .class, как аргумента от Djamil Legato и Andy Miller. Скрипт требует для своей работы Mootools 1.11

В принципе вот сам скрипт:

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');

});

‘sameheight’ — это как раз и есть название того класса, который используется в качестве аргумента. Естественно его можно назвать как вам угодно.

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

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

  1. xopoc

    Очень полезная статья.
    Очень хотелось бы посмотреть на готовый пример из 3го варианта.

    Ответить
  2. Марат Долотов

    Уже замучился искать нормальный выравниватель блоков:) Хотелось бы попробовать третий, только я не понял как его использовать. Ее чё сохранить как js и дальше как? Извиняюсь за тупость:) Буду благодарен тому кто объяснить)

    Ответить
  3. serg

    когда нашел статью обрадовался,потому как день просидел на этой проблемой, когда прочитал разочаровался — них…я не понятно..sorry

    Ответить
  4. Андр

    Для тех кто в танке и пользуется jQuery я сваял для него плагин с аналогичным принципом и функционалом.

    (function($){
    $.fn.setEqualBlocks = function(selector){

    var _self = $(this);
    var maxHeight = 0;
    var allTargetElements = _self.find(selector);
    allTargetElements.each(function(){
    if($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    allTargetElements.height(maxHeight);
    return this;
    };
    })(jQuery);

    Все это дело сохраняем в файле с названием например jquery.eqblocks.js и даем ссылку на него в html-документе.
    Использование до примитивности простое:

    $(function(){
    $("#works-examples ul").setEqualBlocks("div.item");
    });

    Ответить
  5. Tvolod

    Подвох в первой фразе: «…кто осознал все преимущества верстки слоями перед табличной разметкой». В числе одним из главных преимуществ называется более компактный и читаемый код. А теперь сравним код для решения описанной выше тривиальной задачи на таблицах и без таблиц, на всём чем угодно от CSS до jQuery, по количеству предлагаемых в сети вариантов и «решений» убедимся в том, что решений то нормальных и нет и… может вернемся к нормальной и простой табличной верстке, понимая её преимущества и некоторые ограничения? 🙂

    Ответить
    • Hiway

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

      Ответить

Оставить комментарий

  • (не будет показан)