Одинаковая высота колонок div js. Колонки одинаковой высоты для адаптивного дизайна. Колонки одинаковой высоты с помощью фонового изображения

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

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

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

• Перевод

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту. Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

Способ 1. Использование свойства display: table

Для реализации макета используется список (ul) или блок div с вложенными в него блоками для строки и каждой из колонок. Обрамляющему блоку div присваивается значение display: table , а каждому вложенному блоку-колонке значение display: table-cell .
Рассмотрим пример со списком.
HTML код:

• .....Lots of Content....


• .....Lots of content....


• .....Lots of content....

CSS:

.base {
/*make it 100% width and a minimum of 1000px width*/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}

Преимущества:

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

Недостатки:

Этот метод не работает в браузерах IE7 и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

Способ 2: Использование JavaScript

Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.
HTML код:

… Lots Of Content …

…. Lots Of Content …

… Lots Of Content …

CSS:

.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
.content {
Float: left;
Width: 33%;
}
.rightsidebar {
Float: left;
Width: 33%;
}

JavaScript (jQuery):

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});

Вы можете положить JS код в отдельный файл и вызвать его непосредственно в HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container:

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

Преимущества:

Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.

Недостатки:

Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки

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

HTML код:

CSS:

.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

Leftsidebar {
float: left;
width: 200px;
}

Content {
float: left;
width: 400px;
}

Right {
float:left;
width: 300px;
}

Clearer {
clear: both;
}

Преимущества:

Очень простая реализация.

Недостатки:

Этот метод можно использовать только для макетов/колонок фиксированной ширины.

Способ 4: Использование раздельных блоков с фоном

Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.
HTML код:

…Lots Of Content…

…Lots Of Content…

…Lots Of Content…

CSS:

.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

Container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

Leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

Content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

Rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:

1. .rightback, .contentback, и.leftback содержат элементы.leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
   .leftback соотвествует.leftsidebar,
   .contentback – .content
   и.rightback – .rightsidebar.
3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков
   задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере.contentback (отвечающего за фон.content) сдвинут влево на 300px (что является шириной блока.rightsidebar). (см. рис. ниже)
4. Колонки.leftsidebar, .content и.rightsidebar расположены друг за другом с определенной шириной.
5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина.rightsidebar (300px) и.content (400px) = 700px.(B+G)

На рисунке ниже изображено как располагаются блоки.rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа - .leftback.

Пунктирная линия показывает видимую область колонок (блок.rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов