Оригинал сообщения
Комментарии: [показать]

[600x160]

Перевод статьи Four Methods to Create Equal Height Columns

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

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

[458x131]

Хочешь получить денежный приз? Заходи на SEO блог – угадай дату апдейта тИЦ.

Купить кухню недорого сейчас вполне реально. Я советую выбрать знаменитую фабрику «Кузнец».

Если у вас намечается торжественное событие, то вам нужно заранее заказать оформление зала.

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

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

Рассмотрим пример со списком.

HTML код:

<div class=”base”>

<ul class=”base-row”>

<li class="cell1"><div class="content1" >.....Lots of  Content....</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;

 }

Посмотреть пример

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

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

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

Недостатки:

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

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

Этот метод основан на использовании небольшого JS кода (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-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:

.container > div

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

Посмотреть пример

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

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

Недостатки:

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

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

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

[500x12]

HTML к од:

<div class=”container”>

<div class=”left”></div>

<div  class=”content”></div>

<div class=”right”></div>

<div class=”clearer”></div>

</div>

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 код:

<div class=”rightback”>

<div class=”contentback”>

<div class=”leftback”>

<div  class=”leftsidebar”>…Lots Of Content…</div>

<div class=”content”>  …Lots Of Content…</div>

<div  class=”rightsidebar”> …Lots Of Content…</div>

</div>

</div>

</div>

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. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)


4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.


5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)

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

[400x303]

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

На картинке ниже, черные линии, расположенные ниже красной – это контент элементов <div> .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.

Все 3 элемента имееют смещение слева от C, с помощью relative position.

C = B+G

[500x91]

Этот метод подробно описывается в  этой статье.

Посмотреть пример для 3х колоночного макета | Посмотреть пример для 4х колоночного макета

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

Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:

Метод не так прост, как остальные, однако, он позволяет создать столько равных колонок, сколько требуется.

Вывод

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

[показать]LIci WP - WordPress crossposting plugin