- → Верстка, Дизайн
- → HTML
- → Статьи
Div колонки: 4 способа растянуть div колонки по высоте
Ранее, когда для создания шаблонов использовали табличную верстку, создание колонок с одинаковой высотой было очень легким заданием. Все что нужно было, создать три ячейки в одной строке – все! Но этот метод не приемлем для наших дней, когда мы используем CSS и DIV верстку.
В этой статье обсуждаются некоторые методы и техники создания div колонок, а также их выравнивания по высоте. Требования к этим способам будут простые – работоспособность во всех браузерах (даже в IE6). Все эти методы будут реализованы на 3 колоночном div шаблоне.
Создадим шаблон, в котором все три div колонки будут растянуты по одинаковой высоте.
Способ 1: использование атрибута display:table
В этом методе мы будем использовать список или один div блок, который будет содержать набор колонок. Внешний div блок будет иметь атрибут display:table, все внутренние display:table-cell. По технологии, все колонки растянуться по единой высоте.
HTML разметка
<div class="base"> <ul class="base-row"> <li class="cell1"><div class="content1" >.....Много контента....</div></li> <li class="cell1"><div class="content2">.....Много контента....</div></li> <li class="cell1"><div class="content3">.....Много контента....</div></li> </ul> </div>
CSS стили
.base {
/* Установите 100% width и 1000px min-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 в табличной верстке. Также можно использовать ширину border (только цвет выставить идентично фону), или поиграться с самой шириной колонок.
Недостатки
Этот вариант не работает в IE7 и версиях ниже. Может пройти слишком долго времени, пока IE7 станет новой проблемой IE6 или IE5. Одним словом, не слишком приемлемый способ в плане кроссбраузерности.
Способ 2: использование JavaScript
Этот метод основывается на использовании JavaScript, который автоматически меняет высоту колонок. В этом примере использован jQuery для растягивания div колонок по высоте.
HTML разметка
<div class="container"> <div class="leftsidebar"> … Много контента … </div> <div class="content"> …. Много контента … </div> <div class="rightsidebar"> … Много контента … </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%;
}
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"));
});
Вы можете вынести код в отдельный файл и подключить. Или прямо прописать в контексте HTML кода. Только убедитесь, что код будет идти после подключения jQuery библиотеки.
В этом коде все простейшим образом. Мы собираем коллекцию div блоков, которые внутри .container div, после чего присваиваем им единую высоту.
Преимущества
Не нужно писать много CSS кода, чтобы растянуть колонки по высоте. Также работает во всех популярных браузерах.
Недостатки
Если JavaScript не доступен браузеру, колонки не будут растягиваться. Не стоит переживать по этому поводу… попробуйте найти сайт на котором нет JavaScript. Практически у 99,99% пользователей JavaScript доступен в браузере.
Способ 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;
}
.rightright {
float:left;
width: 300px;
}
.clearer {
clear: both;
}
Преимущества
Это очень просто, не потребует много CSS кода.
Недостатки
Вы не сможете менять ширину колонок. Если нужно будет больше или меньше колонок, придется перерисовывать фоновое изображение и менять CSS код. Одним словом, придется все переделывать!
Способ 4: Использование отдельных div элементов для фона каждой колонки
Этот принцип похож на «Матрешку», где мы будем использовать div элементы для фона каждой из колонок. Каждый div блок будет принимать высоту наибольшего из них. В общем, сейчас сами все увидите.
HTML разметка
<div class="rightback"> <div class="contentback"> <div class="leftback"> <div class="leftsidebar">…Много контента…</div> <div class="content"> …Много контента…</div> <div class="rightsidebar"> …Много контента…</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;
rightright: 300px; /* ширина правой колонки */
}
.leftback {
width: 100%;
position:relative;
rightright: 400px; /* ширина области центральной колонки */
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 это внешние, обвертывающие div блоки таких элементов, как .leftsidebar, .content и .rightsidebar – которые содержат контент.
- Каждый обвертывающий div блок служит фоном для каждого из контентсодержащих.
- Исключая самый внешний блок, все остальные div блоки имеют отступ справа, который эквивалентный ширине колонки.
- Внутренние div блоки колонок (.leftsidebar, .content, .rightsidebar) имеют обтекание слева и определенную ширину.
- Они имеют левый отступ, который эквивалентный суме всех значений ширины колонок, исключая наибольшую. Вот так = ширина rightsidebar (300px) и content (400px) = 700px (B + G).
Картинка снизу показывает, как размещены фоновые div элементы .rightback, .contentback и .leftback. Самый нижний - .rightback, самый верхний - .leftback элемент.
Пунктирами обозначена область просмотра контента.
На следующей картинке, черные линии под красной линией – это div элементы контент блоков (leftsidebar, content, rightsidebar), они будут отображаться в случае получения свойства float:left; и соответственной ширины.
Все эти три элемента имеют отступ слева C, используя относительное позиционирование.
C = B + G (смотрите изображение выше).
Преимущества
Этот способ растягивания div колонок по высоте работает во всех браузерах, даже в IE6. Этот метод не потребует JavaScript и достигается с помощью чистого CSS и HTML кода.
Недостатки
Он не настолько понятен как другие. Но он наиболее приемлем для создания большого числа колонок, как только вы его освоите.
P.S.
Каждый способ создания div колонок имеет свои преимущества и недостатки. Советую использовать последний, если вы ищете решение на чистом CSS коде.
Если знаете еще способы растягивания div колонок по высоте, рад буду узнать! Пишите в комментарии!
Источник материала ...
Дальше: Определение и парсинг User Agent на PHP, JS, Python
Development — Taras Moroz