Два метода создать равные по высоте колонки. 1-й метод на CSS, 2-й на jQuery.

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

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

Причем все три колонки принимают высоту самой высокой колонки.

Метод 1: Зададим свойству display: табличные значения

В этом методе основной блок определим , через свойство display, как таблицу. Список (ul) определим, через свойство display, как ряд таблицы. Элементы списка (li) определим, через свойство display, как ячейки. В каждый элемент списка вложим блоки для контента.

HTML

<div class="base">
<ul class="base-row">
<li class="cell1">
<div class="content1" >.....Lots ofContent....</div></li>
<li class="cell1"><div class="content2">.....Lots of
content....</div></li>
<li class="cell1"><div class="content3">.....Lots of
content....</div></li>
</ul>
</div>  

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

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

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

Недостатки:

Этот метод не работает под IE7 и ниже. Так что перед тем как использовать этот метод убедитесь, что ваша аудитория не использует IE7, IE6, IE5 и так далее.

Метод 2: Воспользуемся JavaScript

В этом методе уравняем колонки по высоте с помощью JavaScript. В этом примере, чтобы уровнять колонки, я использовал jQuery.

HTML

<div class="container">
<div  class="leftsidebar"> … Lots Of Content … </div>
<div class="content"> ….  Lots Of Content … </div>
<div  class="rightsidebar"> … Lots Of Content … </div>
</div>

CSS

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

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

Вы можете поместить это код в отдельный JavaScript файл и прикрепить его к своему html-файлу или встроить данный код непосредственно в ваш html-файл.

Если вам необходимо задать стиль для всех блоков, воспользуйтесь следующим кодом:

CSS

.container > div  

Вы также можете задать отдельные стили для каждого блока, создав для каждго из них отдельный класс.

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

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

Недостатки:

Если JavaScript будет отключен, то колонки не будут выровнены по высоте.

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