4 способа как создать блоки-колонки одинаковой высоты
Хочешь получить денежный приз? Заходи на SEO блог – угадай дату апдейта тИЦ.
Перевод статьи
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 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 основных моментов:
- .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
- Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
.leftback соотвествует.leftsidebar,
.contentback – .content
и .rightback – .rightsidebar. - Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)
- Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
- Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .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
Этот метод подробно описывается в .
|
Преимущества:
Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.
Недостатки:
Метод не так прост, как остальные, однако, он позволяет создать столько равных колонок, сколько требуется.
Вывод
Каждый из методов имеет свои преимущества и недостатки, но, наверняка, вы выберите для себя последний метод, который позволяет создать колонки равной высоты, работающие в любом браузере и без JS.
Dmoz
Спасибо за информацию, обязательно применю. Все четыре способа объеснинены так хорошо и понятно, побольше бы таких постов!
jumperЦитировать
Х*ета а не способы!
Это для кого расчитано?
С каких это пор 6 осел начал понимать width: 100%?
Не одного нормального способа. А способ с JavaScript – вообще “шик”! Судя по твоим рассуждениям CSS тогда вообще не нужен! Все можно сделать через JavaScript.
ГуняЦитировать
Во-первых, рассуждения не мои ;) Я не спорю, что эти способы не идеальны. Есть, кстати, 5ый, если вам по душе придется: http://habrahabr.ru/blogs/css/64242/
Блог для вебмастеровЦитировать
Прошу прощения за вчерашний коммент, зуб болел.
Можете удалить? За 5-ый способ спасибо, почитаю.
ГуняЦитировать
Ништяк тема. Мне нравится. Правда чего-то не хватает. Более красочно бы – было бы супер.
DezЦитировать
Стала подобная задача – сделать 3 одинаковых колонки. Сделал на основе 3 способа. В эксплорере колонки разваливаются. Если знаете, подскажите пожалуйста, как это исправить?
AssassinЦитировать
@Assassin,
можете дать ссылку где посмотреть ваш код?
Пример из статьи прекрасно работает в IE
Блог для вебмастеровЦитировать
Сделал список товара в магазине в две колонки, теперь красиво колонки смотрятся.
Вобщем спасибо, хорошо расписал.
e64f.ruЦитировать
На этом создаваемом сайте, куда ведёт ссылка из имени. Внизу три одинаковых по ширине колонки, как следует видны в опере и мозилле (слева, справа и посередине по 300 пикселей), а в эксплорере они чередуются по вертикали. Таблица стилей здесь – . Заранее благодарю.
AssassinЦитировать
@Assassin, так у вас CSS вообще нет для колонок
.left { } .content { } .right { }а должно быть как минимум так:
.left { float: left; width: 300px; } .content { float: left; width: 300px; } .right { float:left; width: 300px; } .clearer { clear: both; }Блог для вебмастеровЦитировать
Спасибо большое, теперь и в эксплорере колонки выстроились, только к левому краю прижались, но всё же совсем другое дело. От души благодарю!
AssassinЦитировать
тут вот еще один способ. похож на последний но сложнее.
правда мне он кажется не подходит как и ваш последний. нужно чтоб при наведении на колонку ее цвет менялся.
AntowaKartowaЦитировать
@AntowaKartowa, это уже дело техники. Цвет можно изменить с помощью JS.
Блог для вебмастеровЦитировать
Да нет суть как раз в том чтоб без скриптов. Для меня не проблема на jquery сриптик написать. В верстании опыта довольно много. Посмотрел все варианты и пришел к выводу что простого решения с нормальной структурой и без скриптов данную задачу решить невозможно. Хоть усрись. Потому пока данный функционал как не самый важный отложили.
AntowaKartowaЦитировать
Все описанные способы хороши с теоретической точки зрения. А вот практически все гораздо сложнее. На практике зачастую нужны более сложные варианты, чем просто колонки, залитые каким-то цветом или имеющие картинку в качестве фона. Альтернативы таблицам в таких случаях просто нет.
ВладЦитировать
вообщето тут несколько вариантов и использовать ЯС или ксс выбор каждого, хотя ЯС может спасти мир, но мне так ксс приятнее. А ИЕ6 очень радостно понимает 100% ширины, по крайней мере на тех 186ти компах с которыми я работаюю там ие6 понимает, хотя опера лучше)))
АРАЦитировать
ну хз хз… слоёв вроде как хватает
АРАЦитировать
Я в таких случаях юзаю таблицу и никому она одна не мешает. Гемороя меньше с совместимостью и дальнейшим редактированием.
СергейЦитировать
Раньше я тоже болел идеей верстки на div-ах без table-ов. Но потом все-же пришел к выводу, что без table не обойтись. Это единственное гарантированное кроссбраузерное решение.
ДеловойЦитировать
Третий вариант странный, ставлю border у каждой колонки, а он у всех прорисовывается. У Чикуёнка на сайте написан хороший вариант растяжения на css (не имитация) и бордеры правильно работают.
AlcЦитировать
Точнее не третий, а последний, четвёртый.
AlcЦитировать
Спасибо, пригодился Способ 2: Использование JavaScript.
Хочу его дополнить:
Если в колонках в теле HTML присутствуют картинки , браузеры Safari и Chrome не успевают посчитать их высоту и учесть при построении колонки во время $(document).ready(function() {
});
MadnessЦитировать
Пардон, отправилась мессага раньше времени ))
Так вот, в догонку к предыдущему посту:
чтобы всё работало как надо, указывайте принудительно в стилях высоту картинок, если вы этого ещё не делаете.
MadnessЦитировать
Спасибо! Выбрал для себя последний способ! То что надо! Только там в css коде есть ошибочка. Тут
.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}
лучше background-color убрать, так как в некоторых случаях эффект колонок теряется
FlexЦитировать
большое спасибо!
МарияЦитировать
Пробовал придумать что-то похожее на способ4 – не прижать футер к низу страницы, а если прижать, то не будут тянуться блоки при увеличении содержания больше первоначальной высоты окна. Колонки равной высоты нужно делать таблицей.
АлександрЦитировать
С каких это пор JavaScript применяется для работы с внешностью элемента? Тогда CSS вообще не нужен. JavaScript язык сценариев, а ни каскадных таблиц.
al_imЦитировать
если быть точнее, JS можно использовать для управления оформления элемента, и других видоизменений (анимация и т.п.)
Блог для вебмастеровЦитировать
Тогда вообще зачем CSS нужен? И jQuery.
al_imЦитировать
CSS – для оформления, JS – для управления (клиентского), jQuery – просто JS библиотека, облегчающая решение многих задач.
Блог для вебмастеровЦитировать
Вы сами же сказали “JS для оформления можно использовать”, а тогда CSS зачем нужен? Раз с помощью JS можно и оформлять элемент, и создавать события.
al_imЦитировать
JS – скрипт управления контентом на стороне клиента. Его основная цель не оформление контента, это всего лишь одна из его возможностей. Не путайте приоритеты языков.
Блог для вебмастеровЦитировать