Выравнивание высоты контейнеров при верстке 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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 62

      +7
      Сделайте кат.
        +7
        Честно говоря, хотел написать в блог Web-разработка, но мне не разрешили писать туда, хотя я и состою в нем.
          +10
          волшебное взаимопонимание [x]
            +8
            а флеш поддерживается?
              +8
              Да ну, главное, чтобы ездил, а колёса мы сами подкрутим.
                +5
                Не доверяю больше отечественному производителю.
                  +4
                  И накачаем.
                    +4
                    Поздравляем Диброва с Новожёновым!
                  +5
                  Данные приемы представлены для решения проблемы именно в html разметке. Что касается флеша, то если я не ошибаюсь это должно делаться именно при изготовлении самой флеш-вставки и средствами action script. Но я не спец во флеше по-этому могу ошибаться.
              +4
              ...ни смог не обратить внимания на один, как по мне, существенный недостаток блочной модели.

              В данном случа правильным будет употребление предлога "не".
                +2
                Согласен, ссори.
                +3
                <habracut> вставьте, пожалуйста, где-то после первого-второго абзаца.
                  +6
                  он же написал - «Честно говоря, хотел написать в блог Web-разработка, но мне не разрешили писать туда, хотя я и состою в нем. »
                    +5
                    Да, но я больше не одену этот розовый свитер!
                      +4
                      я же отвечал уже - «волшебное взаимопонимание [x]»
                        +2
                        И в чем же разница между скриншотами?
                          +2
                          найди семь отличий
                            +3
                            на улице снова дождь....
                            аррррррр...
                            ненавижу дождь.....
                            мерзкий...холодный....
                            так сыро....
                            фууууууууууу....
                            и я с сегодняшнего дня отказываюсь укладывать чайник....
                              +2
                              Код опасности?
                                +2
                                3.141592653589793238462643383279502884197169399375105820974944592+
                                  +2
                                  Агентское задание
                              +3
                              К сожалению, если мы будем использовать трех- или двухколоночный макет сверстанный «слоями», то в итоге высота контейнеров будет совершенно независима от высоты соседних блоков. И будет напрямую зависеть от контента блока и примененных к нему правил отступа (padding). Несмотря на все свои недостатки, таблицы, как бы сами по себе, решают этот вопрос в силу связности соседних колонок. В случае же использования блоков мы имеем на выходе совершенно независимые контейнеры.
                              Смотрите правую и левую колонки
                              +3
                              так все-таки флеш поддерживается?
                                +2
                                А вам сыр... не завезли?..
                                  +2
                                  У меня от тебя остались только стакан и кусок мыла. Но ты все равно будешь со мной. Я вырезала твое имя на руке и ты будешь рядом, пока рана не заживет. А когда она заживет, ты уже вернешься. Я дождусь. Я не влюблюсь ни в кого, пока тебя не будет рядом.
                                    +3
                                    у меня есть килька в томатном соусе. если есть черный хлеб, заходите!
                                    +3
                                    Главное, чтобы можно было грабить корованы...
                                +4
                                Вставил. Извините, первый раз пишу именно в Хабр.
                                  +3
                                  Хорошо вставил! Вставляй еще!
                              • UFO just landed and posted this here
                                  +2
                                  Очень, очень интересно посмотреть на то как вы выровняете в одну высоту три колонки со скроенными углами используя исключительно css2.1 Очень интересно, посмотреть на ваше решение. Спасибо.
                                  • UFO just landed and posted this here
                                      +3
                                      волшебное взаимопонимание [x]
                                        +2
                                        imagemagik
                                        • UFO just landed and posted this here
                                            +2
                                            этот крестик - это не знакрыть, а призыв «добавить в теги»
                                          0
                                          Так никто и не говорил про разметку однотонных прямых колонок, а речь шла про одинаковые по высоте блоки, которые не зависели бы от контента. А используя background-color и border вы этого не добьетесь однозначно.
                                          Очень не хотел реагировать на ваши не совсем приятные высказывания, но скажу что я гуглил эту тему и внятных решений именно на русских сайтах не нашел. Все решения были типа: "не получается - вставте таблицу". Был бы очень рад, если бы вы привели примеры ссылок на статьи о решении этой проблемы.
                                          • UFO just landed and posted this here
                                              0
                                              Я смотрел этот пост, и там говорил, что использование списков для свей разметки не есть семантически верный способ. Но в принципе, скажу так, что предложенный там вариант тоже имеет право на жизнь. Просто способ который использовал я наиболее подходил для конретной ситуации, и кстати в посте я об этом говорил.
                                              • UFO just landed and posted this here
                                                  0
                                                  > выбрать довольно убогое решение с использованием js, когда есть нормальное...
                                                  Че-то я от вас так и не услышал нормального варианта решения для того чтобы сделать 100% высоты для контейнера со скроенными углами и фоном отличным от базового. Как вы решите именно этот вопрос?
                                                  • UFO just landed and posted this here
                                                      0
                                                      Я очень, очень не хотел реагировать на все ваши выражение в мой адрес, но теперь все таки сделаю это. Очень жаль, что пользуясь удаленностью интернета люди начинают мнить себя полубогами, и не стесняются называть неизвестных им людей "говном". Так вот, если бы я встретил вас в реальной жизни, я бы без малейших зазрений совести засунул бы ваш язык вам в жопу очень глубоко, и очень сильно настучал бы по голове, просто, что бы вы были сдержанние в использовании всяких нехороших слов к незнакомым вам людям.
                                                      Поверьте, я очень не хотел писать этого.
                                                      • UFO just landed and posted this here
                                                      0
                                                      А можно я ссылкой поделюсь? Про скругленные уголки :)
                                                      Классика А вообще закруглять уголки js'ом не порочно, думаю.
                                                        0
                                                        опять ссылка побилась.
                                                        %EE на o замените :)
                                        +5
                                        Лучше без скриптов!
                                        Кроссбраузерно и очень просто.

                                        У всех такой позитивный настрой в понедельник :)
                                          +5
                                          Кто-нибудь объяснит мне что произошло в комментах? Хабр их рэндомально подставляет?! ))
                                          Я идиот, убейте меня кто-нибудь! [x] )))
                                            +5
                                            камменты опасносте[x]
                                              +2
                                              неправильная жепка!
                                                0
                                                красочность взамен сверхвыработки!
                                              +4
                                              Это хабралюди такие добрые и готовые поддержать любой флэш-моб :)
                                                +1
                                                Вы забыли варианты с экстра-разметкой.
                                                Пример
                                                По моему скромному мнению, этот вариант более предпочтителен.
                                                • UFO just landed and posted this here
                                                    +1
                                                    Экстраразметка нужна в больших проектах. Именно многоколоночный макет удобно строить при таком подходе (если подразумевается возможный редизайн), а эти вложенные div'ы можно и нужно использовать как угодно, присваивать те же графические background'ы и т.д.

                                                    Вариант с border'ами - слабая поддержка старыми браузерами (а поддержка того же IE5.5 пока еще практикуется и диктуется заказчиком - да, в рунете IE5.5 уже умер, в мире - нет). Потом, как же графические бэкграунды колонок, а если колонки на определенном расстоянии друг от друга? Размеры в процентах/em'ах? Вариант экономный, но влечет за собой проблемы, которые не видны на первый взгляд.
                                                    • UFO just landed and posted this here
                                                        +1
                                                        А у вас есть работающее решение для ширины в процентах?
                                                        Собственно, с этой техникой я сталкиваюсь не впервые и, насколько помню, с процентами это не работало.
                                                          0
                                                          А у вас есть рабочее решение для ширины в процентах?
                                                          С техникой сталкиваюсь не впервые, насколько помню, с процентами это не работало.
                                                          • UFO just landed and posted this here
                                                    0
                                                    Мда. День банальностей на хабре. Читайте классиков.
                                                      0
                                                      Сагалаев уже классик? :)
                                                        0
                                                        Отдельные его слова - классика

                                                    Only users with full accounts can post comments. Log in, please.