Колонки одинаковой высоты. Блоки одинаковой высоты

Колонки, получаемые с помощью ячеек таблицы, имеют одну высоту. Это неудивительно, поскольку ячейки взаимосвязаны и при повышении высоты одной ячейки, соответственно увеличивается высота рядом расположенных ячеек. Многие разработчики пытаются произвести подобный эффект с помощью слоёв, т.е. сделать их взаимосвязанными и одной высоты, независимо от объема содержимого. В действительности, при вёрстке слоями высота колонок устанавливается автоматически исходя из объема контента. Поэтому искусственные приёмы по созданию колонок одинаковой высоты противоречат самой идеологии слоёв.

Таким образом, видно чёткое разделение подходов к вёрстке:

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

Игнорирование этих принципов приводит к усложнению кода и появлению ошибок в отображении документа браузерами, как следствие, повышается время на разработку сайта и его отладку. Исключением может служить применение свойства height , которое устанавливает высоту слоёв. В примере 5.32 показано создание подобного макета.

Пример 5.32. Использование height

Результат данного примера показан на рис. 5.23.

Рис. 5.23. Колонки одинаковой высоты

Понятно, что объём текста в колонках может различаться, поэтому высоту через height обычно указывают с запасом. Ещё можно добавить свойство overflow со значением auto . Если текст превысит заданную высоту, появится полоса прокрутки.

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

Границы в качестве колонок

Суть метода в следующем - устанавливаем слева или справа от элемента границу, ширина которой совпадает с шириной одной из колонок. Понятно, что границы предназначены совсем для других целей, но в данном случае такое их использование позволяет получить желаемый результат. Для этого создаем слой с именем layout и для него устанавливаем стиль, как показано ниже.

Layout { border-left: 200px solid #c7e3e4; /* Ширина границы и цвет левой колонки */ background: #e0d2c7; /* Цвет фона правой колонки */ }

Поскольку слой у нас всего один, то колонки, имитированные с помощью широкой вертикальной линии и фона, всегда имеют одну высоту. Остается расположить информацию точно поверх границы. Для левой колонки, назовём её col1 , следует задать ширину и с помощью стилевого свойства float указать, что это плавающий элемент. Поскольку граница не является частью текстового блока, то требуется сместить слой col1 влево за счет добавления свойства margin-left с отрицательным значением, равным ширине границы.

Col1 { width: 200px; /* Ширина левой колонки */ float: left; /* Превращаем в плавающий элемент */ margin-left: -200px; /* Сдвигаем все влево на ширину границы */ }

В данном примере сочетание свойств float и margin-left позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.

Из-за того, что используется плавающий элемент, может получиться, что текст в левой колонке выходит за пределы цветного прямоугольника. Чтобы этого не произошло, следует отменить действие свойства float за счет использования clear . В данном случае использовать overflow : hidden нельзя, будет обрезано пространство внутри границы, включая нашу фальшивую колонку. Окончательный код показан в примере 5.33.

Пример 5.33. Две колонки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 5.24.

Рис. 5.24. Две колонки, созданные с помощью границы

Для создания трёхколоночного макета границу следует добавить слева и справа от контейнера layout . Для разнообразия ширина правой колонки указывается в em (в процентах границу задавать нельзя).

Layout { border-left: 200px solid #c7e3e4; /* Ширина границы и цвет левой колонки */ border-right: 15em solid #ecd5de; /* Ширина границы и цвет правой колонки */ background: #e0d2c7; /* Цвет фона средней колонки */ }

Для первой колонки стилевой код остаётся неизменным, а третьей колонке следует указать свойство float со значением right и сдвинуть её вправо с помощью свойства margin-right (пример 5.34).

Пример 5.34. Три колонки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 5.25.

Рис. 5.25. Три колонки, созданные с помощью границы

Браузер IE6 содержит ошибку с границами и некорректно отображает данные примеры. Чтобы он правильно выводил макет, для него следует величину границ уменьшить вдвое.

Фоновая картинка

Принцип использования фонового изображения для колонок основан на том, что мы видим повторяющуюся по вертикали картинку, сверху которой располагается текст и другие элементы. Поскольку нам надо сделать эффект колонок, фон добавляется не к колонкам по отдельности, а для их родителя. Здесь имеет значение, какой это фон, что он собой представляет и каковы его размеры. Предположим, что у нас двухколоночный фиксированный макет шириной 980 пикселов, левая колонка занимает ширину 200 пикселов. Создаём изображение размером 980х60 пикселов. Ширина соответствует ширине макета, а высоты обычно берётся 20–30 пикселов.

Многие разработчики делают рисунок высотой 1–2 пиксела, полагая, что объём файла будет минимальным, и загрузка произойдёт быстрее. Однако всё обстоит наоборот. Компьютер тратит в несколько раз больше времени для отображения одной страницы с узким фоном, что особенно заметно при прокрутке окна браузера. Так что при использовании фонового рисунка делайте изображение высотой не менее 20–30 пикселов - так отображение его на странице будет происходить быстрее.

Слишком скучно делать колонки однотонными, раз мы имеем дело с изображениями, поэтому добавим какие-нибудь ограничители по бокам колонок (рис. 5.26). Здесь самое главное, чтобы рисунок повторялся без стыков по вертикали.

Рис. 5.26. Фоновый рисунок

Теперь вставляем фон для слоя layout , внутри которого расположены наши колонки (пример 5.35).

Пример 5.35. Фон для фиксированного макета

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 5.27. Хорошо заметно, что колонки имеют одинаковую высоту.

Рис. 5.27. Колонки одинаковой высоты, созданные фоновой картинкой

При использовании в рисунке каких-либо декоративных элементов, следует позаботиться, чтобы текст от них был отодвинут через padding и не «налипал».

Для трёх и более колонок в фиксированном макете процесс подготовки изображения сходный, а вот для резинового макета есть ряд особенностей из-за того, что ширина макета может лежать в широком диапазоне. Тогда фоновую картинку необходимо сделать заведомо широкой, например, 2000 пикселов. Фон не влияет на ширину веб-страницы и если не помещается в отведённые ему размеры, то обрезается. Этим качеством и воспользуемся. В качестве примера рассмотрим резиновый макет с фиксированной правой колонкой шириной 300 пикселов. Для него сделаем изображение шириной 2000х30 пикселов с тёмно-красным прямоугольником справа (рис. 5.28).

Рис. 5.28. Фон для резинового макета

Фиксированная колонка располагается справа, поэтому фон также надо установить в правый верхний угол, указав 100% 0 для свойства background (пример 5.36).

Пример 5.36. Фон для резинового макета

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Напоследок перечислю плюсы и минусы использования фона в качестве искусственных колонок.

Плюсы

• Метод простой и не требует изменения существующего кода.
• В рисунок можно добавить разные декоративные элементы вроде градиентов, линий и др. Это позволит разнообразить дизайн колонок.

Минусы

• Наилучшие результаты получаются, когда одна из колонок или все имеют фиксированные размеры. Для макета, где ширина колонок резиновая, фон корректно добавить не получится.
• При отключении изображений в браузере текст может оказаться нечитабельным. Впрочем, это легко обойти, задав наряду с фоновой картинкой цвет фона.
• Файл с фоновой картинкой может иметь большой объём и долго загружаться. Отметим, что для простого изображения, вроде приведённого на рис. 5.27, это не так, при размерах 2000х30 пикселов файл занимает всего 275 байт.

Цвет фона

При имитации колонок одинаковой высоты с помощью фоновой картинки она добавляется через свойство background к родительскому элементу колонок (слой layer ). Похожим образом работает и цвет фона. Его достаточно установить для слоя layer , а самой высокой колонке задать свой собственный цвет. В примере 5.37 приведён трёхколоночный макет, в котором цвет фона боковых колонок устанавливается через слой layer , а центральной колонки через слой col2 .

Пример 5.37. Использования фонового цвета для колонок

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Свойство height в примере добавлено, чтобы стало заметно влияние цвета на колонках. В реальности оно не требуется.

У этого метода есть ряд недостатков, которые следует учитывать на практике.

• Сложно оценить предварительно, какая из колонок будет иметь наибольшую высоту.
• Для «раскрашивания» колонок применяется всего два цвета, так что нельзя задать трём и более колонкам разный цвет и чтобы они при этом имели одинаковую высоту.

Достоинства у метода тоже имеются, но их можно выразить всего парой слов: это простота и изящность решения. Поэтому этот метод можно довольно часто встретить в вёрстке, в частности, он применяется на сайте W3C.

В качестве разметки будем использовать списки. В каждый элемент 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); } } });

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

В статье решается проблема выравнивания по высоте контейнеров с текстом разного объема при использовании принципов блочной верстки.

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

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

Фоновый рисунок

Итак, идея вполне предсказуемая и заезженная (так как многие проблемы решаются заменой картинкой), она имеет ряд преимуществ, которые нельзя не отметить:

• высокие показатели кроссбраузерности;
• нет никаких проблем с валидацией;
• используется минимальное количество вспомогательных блоков, что сокращает объем HTML-кода.

Как обычно, не бывает плюсов без минусов:

• нагрузка на сервер за счет использования дополнительного количества картинок;
• работает только в том случае, если известна точная ширина колонок.

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

Высоту этой линии рекомендуется использовать величиной 1 пиксель, для экономии размера изображения. Устанавливаем циклическое повторение этой картинки по оси ординат и получаем колонки одинаковой высоты (по крайней мере визуально). Ниже представлен код, с помощью которого реализуется данный метод

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Fon { width: 600px; background: url(fon. png) repeat- y; float: left; } . left { width: 200px; float: left; } . center { width: 200px; float: left; } . right { width: 200px; float: left; }

В итоге в браузере получаем такую картину:

margin + padding + overflow

Это решение я бы описал, как наглое но очень действенное. Принцип работы его заключается в том, что создается родительский элемент с очень большим значением высоты, которое достигается за счет значения свойства padding-bottom , но в тоже время компенсируется таким же отрицательным значением наружного отступа - margin-bottom . И плюс к этому добавляем свойство overflow родителю со значением hidden , что позволит обрезать высоту родителя по высоте самой большой колонки.

Для этого в код записываем

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Background { width: 600px; overflow: hidden; } . left { width: 200px; float: left; background: #fc7777; padding- bottom: 20000px; margin- bottom: - 20000px; } . center { width: 200px; float: left; background: #7780fc; padding- bottom: 20000px; margin- bottom: - 20000px; } . right { width: 200px; float: left; background: #fcaf77; padding- bottom: 20000px; margin- bottom: - 20000px; }

Результат в браузере будет аналогичен предыдущему способу.

Для этого метода будут характерны следующие положительные эффекты:

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

Недостатки:

• в старых версиях браузера Opera не работает, так как этой программой неверно трактуется свойство overflow .

Метод дополнительных оберток

В этом случае надо создать для каждой колонки дополнительную обвертку с соответствующим цветом, а потом вывести каждый фон для определенной колонки относительным позиционированием. Принцип действия очень сложный для понимания, более подробно о работе этого способа можно узнать у автора идеи – Метью Тейлора. Однако, не вникая в подробности, можно использовать его шаблон, приведенный ниже

HTML

< div class = "background1" > < div class = "background2" > < div class = "background3" > < div class = "left" > < div class = "center" > < div class = "right" >

Background1 { width: 100 %; background: #fc7777; float: left; position: relative; right: 30 %; } . background2{ width: 100 %; background: #7780fc; float: left; position: relative; right: 40 %; } . background3 { width: 100 %; background: #fcaf77; float: left; } . left { width: 30 %; float: left; overflow: hidden; position: relative; left: 70 %; } . center { width: 30 %; float: left; overflow: hidden; position: relative; left: 70 %; } . right { width: 39 %; float: left; overflow: hidden; position: relative; left: 70 %; }

Результат в браузере будет полностью совпадать с предыдущими методами.

Для этого метода стоит отметить следующие положительные характеристики:

• поддерживается всеми браузерами;
• соответствует принципам так называемой «резиновой верстки»;
• сохраняет показатель валидности кода.

Нежелательный эффект рассматриваемой верстки:

• большое количество дополнительных контейнеров (их количество соответствует числу колонок – обязательное условие для работы метода).

В каких браузерах работает?

6.0+	1.0+	9.5+	3.1+	2.0+

• Перевод

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 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).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов