Pull to refresh

4 способа как создать блоки одинаковой высоты

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

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

Способ 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: искусственные колонки


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

Фон для колонок

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.
Пояснение к технике
Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов <div> .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G
Пояснение к технике
Этот метод подробно описывается в  этой статье.
Посмотреть пример для 3х колоночного макета | Посмотреть пример для 4х колоночного макета

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


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

Недостатки:


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

Вывод


Каждый из методов имеет свои преимущества и недостатки, но, наверняка, вы выберите для себя последний метод, который позволяет создать колонки равной высоты, работающие в любом браузере и без JS.
Tags:
Hubs:
Total votes 78: ↑66 and ↓12 +54
Views 222K
Comments Comments 138