Колонки одной высоты css. Блоки одинаковой высоты

) можно вообще не использовать. Я привел его для большей наглядности, но в реальной верстке его можно опустить.

2. Использование margin, padding + overflow:hidden

#middle{width:100%; overflow:hidden; } #left-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; } #content{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:59.8%; } #right-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; }

Способ уже немного посложнее, но тоже ничего сверхумного. Радует то, что способ работает во всех браузерах. Суть метода:

• Делаем див в котором будем размещать все наши колонки
• Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
• Выравниваем колонки по горизонтали с помощью float:left;
• Присваиваем всем колонкам margin-bottom:-32000px; padding-bottom:32000px;
• Присваиваем overflow:hidden для родительского дива.

Если непонтяно что мы тут сделали, то объясню подробнее.

Что делает свойство margin-bottom:-32000px?
Оно растягивает колонку вниз на 32000px.

Что делает свойство padding-bottom:32000px?
Оно делает отступ от нижнего края блока до контента в 32000px.

Что делает свойство overflow:hidden у родительского дива?
Оно скрывает ту часть блока в которой нет контента.

Если просуммировать то что я написал выше, то получается, что мы растянули пустое пространство снизу каждой из колонок, и обрезаем его по высоте той колонки в которой больше всего контента. По факту пустое пространство тянется еще очень долго вниз, но пользователь его не видит за счет overflow:hidden.

3. Вложенные колонки

#middle{width:100%;} #left-wrap{ width:20%; position:relative; } #content-wrap{ width:300%; margin-right:-300%; position:relative; left:100%; } #right-wrap{ width:33.1%; margin-right:-33.3%; position:relative; left:100%; } #left{ float:left; width:100%; margin-right:-100%; position:relative; left:-400%; } #content{ float:left; width:300%; margin-right:-300%; position:relative; left:-300%; } #right{ float:left; width:100%; }

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

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

Первый шаг. Плацдарм

Создадим родительский див в котором будем располагать все наши колонки

Второй шаг. Создаем оформительские дивы

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

Третий шаг. Создаем дивы с контентом

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

Четвертый шаг. Определяемся с шириной оформительских колонок

Ширина всей страницы (ширина плацдарма) - 100%. Ширина левой колонки 20%. Выставим для левого оформительского дива ширину 20%. Пока все просто.

Ширина центральной колонки 60% от ширины страницы. Так как центральная колонка вложена в левую, то ее ширина будет рассчитываться относительно левой колонки(родителя). Центральная колонка в три раза шире чем левая, то есть нужно выставить ширину для центральной колонки в 300%.

Ширина правой колонки 20% от ширины страницы. Так как правая колонка вложена в центральную, то ее ширина так же будет рассчитываться относительно родителя и будет в 3 раза меньше чем ширина центральной, то есть нам нужно выставить ширину правой оформительской колонки в 33,3%.

Пятый шаг. Определяемся с шириной контентных колонок

Все три контентных дива вложены в правую оформительскую колонку. Они вложены параллельно. Чтобы было понятнее можно провести аналогию, три матрешки вложены друг в друга и в последней матрешке лежат три кубика. Матрешки это вложенные друг в друга оформительские колонки, а кубики это дивы с контентом.

Ширина правой колонки 20% от ширины страницы. Мы будем рассчитывать все размера контентных дивов относительно этой величины.

Ширина левой контентной колонки - 100% от родителя (20% от страницы)

Ширина центральнойконтентной колонки - 300% от родителя (60% от страницы)

Ширина правой контентной колонки - 100% от родителя (20% от страницы)

Шестой шаг. Двигаем оформительские колонки

Нам нужно сделать так, чтобы каждая из оформительских колонок начиналась там, где заканчивается предыдущая колонка. Сделать это довольно просто. Мы просто присвоим центральной и правой колонкам position:relative и сдвинем их вправо на 100% - left:100%.

Почему именно 100%? Потому что нам надо сдвинуть колонку на всю ширину родительского блока.

Седьмой шаг. Двигаем контентные колонки

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

Для начала выровняем колонки по вертикали с помощью float:left;

Теперь присвоим левому и центральному контентному диву position:relative;, дальше начнем двигать.

Левый контентный див начинается в левом верхнем углу правой колонки. Чтобы он стал отображаться поверх левой оформительской колонки нам надо сдвинуть его на 80% влево от ширины страницы. Так как ширина правой колонки 20% от страницы, то мы будем двигать на четыре ширины правой колонки влево или на 300% от ширины правой колонки - left:-400%;

После того как мы сдвинули левый див с контентом его место в правой колонке занял центральный див. Его мы должны сдвинуть только на 60% относительно ширины страницы или на три ширины правой колонки. Сдвинем центральную колонку на 300% влево.

Теперь левый и центральный контентные дивы находятся на своих местах. В правой оформительской колонке остался только правый контентный див. Его мы никуда двигать не будем. Он сам занял нужное положение, так как ему больше никто не мешает.

Еще немного пояснений

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

Див с классом clear после всех контетных колонок нужен чтобы разорвать поток. После него высота колонок не будет схлапываться.

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

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

• 
• 
• 
• 
• 
  Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.
• 
  Классический текст Lorem Ipsum.
• 
  Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.
• 
  Классический текст Lorem Ipsum, используемый с XVI века.

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

Select_main { margin:40px auto 0; width:800px; } ul { width:100%; } li { margin:0 10px 20px 5px; padding:10px; width:160px; display:inline-block; vertical-align:top; *display:inline; *zoom:1; border:1px solid #e5e5e5; } .img { width:100%; height:121px; text-align:center; display:table; position:relative; } .img span { display:table-cell; vertical-align:middle; } .img img { width:100%; }

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

$(document).ready(function(){ var maxH = 0; $("li").each(function () { var h_block = parseInt($(this).height()); if(h_block > maxH) { maxH = h_block; }; }); $("li").height(maxH); });

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

Теперь немного подробнее, чего мы тут написали. Объявляем переменную maxH и присваиваем ей значение 0 . Далее выбираем все элементы li в каталоге и проходимся по ним в цикле с помощью функции each . В теле цикла мы объявляем еще одну переменную h_block в которой сохраняем значение высоты каждого элемента li , округленного до целого числа с помощью функции parseInt . Все в том же цикле задаем условие - если значение текущего блока больше, чем значение в переменной maxH , то присваиваем последней это значение. Другими словами - мы проверяем высоту каждого блока и наибольшую высоту сохраняем в переменную maxH . И, наконец, пройдясь по всем li и вычислив наибольшую высоту, мы присваиваем ее всем блокам (строка $("li").height(maxH); ).

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

Исправить такую ситуацию полностью нельзя (если только не уменьшить объем текста в проблемной лишке), а вот свести недостаток к минимуму вполне возможно.

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

$(document).ready(function(){ var line = $("li"); var times = 0, rows = Array(), max = 0; line.each(function() { if (times == 4) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = ; } if (max < $(this).height()) { max = $(this).height(); } rows = $(this); times += 1; }); if (times != 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

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

Перевод: Влад Мержевич

Одна из немногих вещей, которую не так просто сделать с помощью CSS - это создание колонок одинаковой высоты. Существуют разные подходы, у каждого из них есть свои плюсы и минусы, здесь я хочу показать четыре метода.

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

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

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

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

HTML

Мы используем тот же HTML, что и в методе фиктивных колонок выше.

CSS

CSS опять же весьма прост. Для разнообразия я выбрал резиновый макет , но вы можете легко всё настроить и для фиксированной ширины.

#container { background: #555; overflow: hidden } #content { float:left; width:75%; background:#eee; } #sidebar { float:left; width:25%; background:#555; }

Кроме использования % вместо px заметьте, что я задал цвет фона для #content и #sidebar . Вам остается только установить его для любой колонки, которая будет выше, но здесь я специально задал цвет для двух колонок.

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

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

Плюсы

• Просто настроить.
• Легко обслуживать.

Минусы

• Сложнее реализовать для трёх и более колонок.
• Требуется заранее знать высоту колонок.
• Не работает, когда колонки выше или короче на разных страницах.

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

На этот метод я наткнулся не так давно на Smashing Magazine в статье Тьерри Кобленца, хотя позже нашёл статью Алана Пирса на A List Apart , написанную несколько лет назад об этом же методе. Используются границы и отрицательные отступы, чтобы создать видимость колонок равной высоты.

HTML

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

CSS

В CSS начинается самое интересное. Контейнер просто используется для фиксации ширины и выравнивания макета по центру. Интересное происходит с #content и #sidebar .

#container { width:960px; margin: 0 auto; } #content { float:left; width:700px; border-left: 260px solid #555; } #sidebar { float: left; width:260px; margin-right: -260px; position: relative; }

Все фоновые цвета в этом методе устанавливаются для колонки #content . Мы задаём фон как обычно, а затем добавляем левую границу равную ширине боковой панели. Цвет границы совпадает с фоном боковой панели.

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

Вначале дадим боковой панели отрицательный правый margin равный её ширине (или ширине левой границы контента, они одинаковы). Это вернёт боковую панель туда, куда мы и хотим, но она по-прежнему не видна. Проблема в порядке наложения двух дивов. #content располагается поверх #sidebar , так что мы должны переместить #sidebar на передний план. Сделаем это путём добавления position: relative для боковой панели и теперь его содержание становится видно.

Плюсы

• Простая настройка, после того как вы понимаете, как это работает.
• Легко обслуживать.

Минусы

• Ширина боковой панели должна быть фиксирована, поскольку border-width понимает только абсолютные значения.
• Отрицательные margin потенциально могут привести к ошибке в некоторых старых версиях IE.

Рекомендую прочесть обе статьи, ссылки на которые я привёл выше, поскольку они предлагают более детальную информацию, чем я здесь. Обе статьи содержат код для использования этого метода с третьей колонкой, а статья Тьерри рассказывает о создании границ между колонками.

Последний метод создал Мэтью Джеймс Тейлор . Из всех методов представленных здесь, на этот раз он будет работать в самых разных случаях использования.

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

HTML

HTML похож на то, что мы видели выше, хотя вы заметите дополнительный контейнер div.

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

CSS

В CSS происходит несколько больше, чем мы видели до этого момента. Для #sidebar и #content задаётся float со значением left и устанавливается ширина, всё остальное помимо этого является новым.

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

#container-outer { float:left; overflow: hidden; background: #eee; } #container-inner { float:left; background: #555; position: relative; right:75%; } #sidebar { float: left; width: 25%; position: relative; left: 75%; } #content { float: left; width: 75%; position: relative; left: 75%; }

Первый шаг - добавить float к колонкам и контейнерам. Я применяю значение left , но направление в данном случае не важно. Используйте направление необходимое для вашего макета. Следующим шагом является установка фонов для двух контейнеров div . Я ставлю фон для #container-inner чтобы получить желаемое для боковой панели и фон для #container-outer чтобы получить желаемое для основного контента.

Если мы остановимся здесь, то увидим фон только для вложенного div , поскольку он по порядку наложения выше, чем внешний div .

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

#container-inner { position: relative; right: 75%; }

Позиционируем внутреннюю колонку и устанавливаем значение right на 75%, оно такое же, как ширина колонки с контентом.

Фоны на месте, но содержимое обоих колонок также сдвигается на 75% влево. Нам нужно сдвинуть их на место.

#sidebar { position: relative; left:75%; } #content { position: relative; left:75%; }

Мы снова применяем относительное позиционирование и поскольку содержимое обоих колонок сместилось на 75% влево, нам надо сдвинуть это обратно на 75% вправо. Сделаем это установкой значения left в 75%. Теперь всё вернулось назад, где и должно быть.

Плюсы

• Работает независимо от того, какая колонка выше или короче.
• Работает с любым типом макета (фиксированным, резиновым, эластичным и др.).
• Можно сделать сколько угодно колонок.

Минусы

• Немного сложно для первого понимания.
• Требуются дополнительные несемантичные дивы.

В целом это наиболее надёжный метод и он гарантированно работает в любой ситуации. Я призываю вас поиграть с этим для настоящего понимания и прочитать статью Мэтью несколько раз.

В статье Мэтью идёт макет из трёх колонок и у него также есть демонстрация для четырёх и пяти колонок. Я решил показать макет из двух колонок в надежде что это сделает идею проще для понимания.

Дополнительные ресурсы

Это ни в коем случае не единственные методы создания колонок одинаковой высоты. Крис Койер некоторое время назад поделился несколькими другими методами на CSS Tricks , которые вы можете предпочесть представленным здесь.

Есть также много других методов, которые можно найти немного поискав. Думаю, что данная статья и статья Криса охватывает большинство из наиболее распространённых методов.

Резюме

Колонки одинаковой высоты являются желательной чертой дизайна, но их не всегда легко сделать с помощью CSS-макетов . В идеале мы должны были бы использовать что-то вроде height: 100% и на этом всё, но сейчас мы можем применять любой из методов, упомянутых выше.

просты в настройке, но нужен дополнительный HTTP-запрос для изображения, а любое изменение макета требует новой картинки.

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

сравнительно просты в работе, не требуют предвидения о высоте колонок и прекрасно адаптируются к нескольким колонкам. Только нужно чтобы одна колонка была фиксированной ширины.

работает в большинстве случаев. Не нужно предварительно знать о высоте колонок и можно работать с любым желаемым числом колонок. Этот метод немного сложнее других.

Со временем я ожидаю более простого стандартного решения, но пока этих четырёх методов должно быть достаточно для вашего проекта.

Насколько часто вы делаете дизайн макета с колонками одинаковой высоты? Какой метод создания колонок вы при этом используете?

Проблема создания колонок одинаковой высоты достаточно известна. Суть её в том, что при вёрстке float-блоки колонок имеют разные высоты, согласно своему содержимому.

В идеале же, нужно получить равные колонки

Существуют различные способы добиться этого эффекта. Все они без особого труда находятся в гугле, но в основном методика заключается в иммитации колонок («псевдоколонки»). Делается это за счёт различных смещений (margin и padding ), дополнительные контейнеры, которые «подставляются» под настоящие блоки, фоновые картинки и даже за счёт border .

Всё это конечно интересно, но при создании адаптивного дизайна ни один из этих методов не работает как следует.

Ситуация совсем оказалась печальной, когда я стал работать с «полурезиновой» адаптивной сеткой, где меняется значение float блоков (left и none ), а высота блоков должна меняться к auto при float:none .

Пробившись с этой задачей несколько дней, я пришёл к выводу, что легальных и достаточно простых способов её решить всего ничего:

• использовать таблицы (table )
• использовать display: table (и его производные)
• использовать javascript

Верстку через тэги table рассматривать нет смысла. Вариант с display: table интересен, но только до момента, пока не сталкиваешься с «особенностью» браузеров отображать вложенные блоки вроде PRE на всю ширину браузера, а не table-cell-контейнера. В итоге этот вариант так же пришлось отмести, поскольку все эти мелкие «особенности»-баги перевесили все достоинства метода.

В итоге остался только один вариант - использование js-скрипта, который будет автоматически рассчитывать и выставлять высоты колонок с учетом их «адаптивности».

Нетерпеливые могут посмотреть рабочий .

HTML-разметка

Для демонстрации я буду использовать вот такой html-код:

... тут стили и js-скрипты...

Это достаточно типовая схема модульной сетки на две колонки:

• общий контейнер main
• два блока-колонки content и sidebar1
• каждый блок сопровождается своим wrap-блоком

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

Как сделать адаптивность

Существует несколько методик. Самый простой - это «резиновый» дизайн - когда все колонки задаются в процентах. Проблема такого дизайна в широких мониторах. При ширине более 1000-1200px абзацы превращаются в одиночные строчки, что ухудшает читабельность текста. Поэтому обычно ширину сайта ограничивают до 1000px (960, 980px), что позволяет без проблем разместить текст и боковую колонку.

При фиксированной ширине сайта адаптивность осуществляется путём отдельных @media-правил под каждый диапазон разрешений. Достаточно распространён следующий вариант:

@media (min-width: 1200px) { } @media (min-width: 768px) and (max-width: 959px) { } @media (max-width: 767px) { }

То есть сайт верстается с неким базовым разрешением, например 960px. Если разрешение экрана больше 1200px, то прописываются стили, где ширина контента и сайдбара становится больше. Иногда добавляют ещё одну колонку или какие-то блоки.

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

Width: 100%; float: none;

То есть растягиваем на всю ширину и убираем «плавание».

«Полурезиновый» дизайн

Вариант с множеством @media хорош, но несколько трудозатратен. Если подумать, то колонки изначально должны быть резиновыми до какой-то определённой базовой ширины. Если размер экрана более 960px, то ширина сайта не меняется и составляет 960px. Но как только размер уменьшился, то размеры колонок меняются пропорционально друг другу. Как только достигается минимум (совсем узкая колонка), убираем «плавание» и растягиваем блоки на всю ширину.

На демо-примере используется именно такой вариант верстки. Покажу как это делается.

Вначале задаётся общая ширина контейнера:

Div.main { margin: 0 auto; width: 100%; max-width: 960px; }

Первое правило центрирует блок в браузере. Второе - выставляет ширину 100%. Третье ограничивает размеры максимальной шириной. Таким образом размер блока не превысит 960px.

Внутренние блоки позиционируются так:

Div.content { width: 75%; float: right; } div.sidebar1 { width: 25%; float: left; }

Суммарная ширина блоков должна быть равна 100%. Выравнивание float также произвольно. В этом примере контент располагается справа. Чтобы переместить его влево (то есть поменять колонки) достаточно у div.content указать float: left; .

Теперь зададим @media правило для узких экранов (менее 767px):

@media (max-width: 767px) { div.content { width: 100%; float: none; } div.sidebar1 { width: 100%; float: none; } }

// вся полезная ширина сайта (контент + сайдбар) @CONTENT_WIDTH: 960px; // ширина основного сайдбара @SIDEBAR_WIDTH: 250px; // расчет пропорций % для контента и сайдбара (в сумме 100%) @RATIO_CONTENT: 100% - (100% * @SIDEBAR_WIDTH / @CONTENT_WIDTH); @RATIO_SIDEBAR: 100% - @RATIO_CONTENT;

В css-less используем так:

Div.main { ... max-width: @CONTENT_WIDTH; ... } div.content { ... width: @RATIO_CONTENT; ... } div.sidebar1 { ... width: @RATIO_SIDEBAR; ... }

То есть можно указать произвольные размеры (@CONTENT_WIDTH и @SIDEBAR_WIDTH ), LESS сам пересчитает их в проценты.

Равная высота колонок

Алгоритм расчет высот достаточно простой: смотрятся два блока, после этого выбирается тот, который больше и второму блоку выставляется его высота. В моём варианте перед этим выставляется height:auto , с тем, чтобы браузер выставил «правильную» высоту исходных блоков. Если этого не сделать, то высота блоков будет только увеличиваться, но не уменьшаться.

Для того, чтобы отслеживать «адаптивность», я придумал использовать свойство float блоков. Если оно равно none , то ширина блоков должна быть auto и менять высоту уже не нужно.

Вот полный код скрипта:

Function column2height(e1, e2) { e1.css("height", "auto"); e2.css("height", "auto"); if (e1.css("float") != "none") { height_1 = e1.height(); height_2 = e2.height(); if (height_1 > height_2) { e2.height(height_1); } else { e1.height(height_2); } } } $(function() { e1 = $("div.sidebar1"); e2 = $("div.content"); column2height(e1, e2); $(window).resize(function() { column2height(e1, e2); }); });

То есть всё шаманство в функции column2height() , которая первый раз срабатывает при загрузке документа, а второй - при изменени размеров браузера.

Блоки, которые требуется сравнивать, указываются один раз (чтобы после их не искать). Если требуется выровнять три колонки, то можно переписать column2height() под нужное количество элементов. Там в общем-то только сравнение высот на поиск максимальной.

Достоинства метода

• Работает с любой html-структурой, где используются float-блоки.
• Не требует переверстки.
• Любая ширина колонок.
• Прост для понимания и модификации.
• «Полурезиновая»-адаптивность не требует множества @media-правил.
• Автоматически распознаётся «адаптивность» для рассчёта высоты колонок.
• Используется настоящая высота колонок, а не «псевдоколонки».
• Блоки колонок могут быть произвольно оформлены, включая отступы, поля, границы, фоновые изображения, слошные фоны и т.п.

К минусам можно отнести только требование наличия включенного javascript у посетителя. По современным меркам это уже не критично.