• ×

    • Колонки одинаковой высоты через CSS3. Колонки одинаковой высоты

    15.06.2019
    • Перевод

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

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

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

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

    Колонки одинаковой высоты с помощью позиционирования

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

    сайт - колонки одинаковой высоты, позиционирование
    Контент

    Описание примера

    1. Все блоки макета были заключены в дополнительный блок-обертку id= "wrapper" , которому была задана минимальная высота (CSS ) в 100%, чтобы он растянулся во всю высоту окна браузера, но при необходимости мог тянуться и дальше. Но так как процентная высота считается относительно предка, то пришлось ее указать и для тегов и . Именно относительно этого оберточного блока мы будем позиционировать наши псевдоколонки, поэтому ему было добавлено свойство CSS :relative.
    2. В нижней части макета были созданы сами псевдоколонки с id равным "menu_back" , "sidebar_back" и "content_back" , к которым было применено абсолютное позиционирование. Кроме этого у боковых псевдоколонок была указана ширина (CSS ) и координаты смещения (CSS , и ), а у центральной - только координаты смещения, чтобы они заняли такое же положение, что и настоящие колонки. Ну а чтобы псевдоколонки вытянулись во всю высоту блока-обертки, им задали свойство CSS :100%.
    3. В результате действий второго пункта наши мнимые колонки хоть и вытянулись, как положено и заняли нужное положение, но при этом расположились поверх основных блоков макета. А все потому, что было использовано абсолютное позиционирование, которое вырывает элементы из основного потока. Чтобы это исправить, им было задано отрицательное значение CSS , которое «положило» их под макет. Все, готово.
    4. В принципе от центральной псевдоколонки можно отказаться, просто задав нужный цвет для всей страницы сайта.

    Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков :

    1. IE6 не понимает , но зато работает с так, как будто это и есть минимальная высота. Также в определенной ситуации этот браузер игнорирует правило . Эти две особенности и были использованы, чтобы, с одной стороны, задать блоку-обертке минимальную высоту, а с другой - не помешать другим браузерам.
    2. В этом примере IE6 растягивает псевдоколонки только на высоту «первого экрана», зато он понимает expression(document.body.offsetHeight), который динамически высчитывает высоту . Вот она и использовалась, чтобы постоянно подставлять нужное значение в свойство.
    3. И все равно IE6 не тянет "content_back" , так как ширина у нее не задана явно. Тут конечно можно указать для нее ширину в 100% и «положить» еще ниже боковых собратьев, задав ей отдельно :-2, но стоит ли оно того?

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

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

    сайт - колонки одинаковой высоты, <a href="/fonovoe-izobrazhenie-stranicy-html-menyaem-cvet-teksta-i-fona/">фоновое изображение</a>

    Контент

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

    Описание примера

    1. У фиксированного макета имеется блок-обертка, который, собственно, и делает макет фиксированным. Вот у него и устанавливается фоновое изображение (CSS ), которое размножается по вертикали.

    Колонки одинаковой высоты с помощью полей и отступов

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

    сайт - колонки одинаковой высоты, поля и отступы

    Контент

    Описание примера

    1. Для увеличения нижних внутренних отступов ко всем колонкам применяется свойство с очень большим значением.
    2. Колонкам задается отрицательное нижнее поле (CSS ) равное указанному отступу. Однако в данном конкретном случае размер этого поля на 100px меньше. А все потому, что способ, который использовался в этом примере для прижатия футера, требует наличия нижнего отступа, равного по размеру высоте этого футера. Итого получаем: 30000px-29900px=100px.
    3. Результатом действия второго пункта стало уменьшение высоты обертки (id= "wrapper" ) до таких размеров, как будто никакого увеличения колонок не было. То есть для него они стали равны высоте исходя из их содержимого (в нашем случае он прибавляет еще те самые 100px), хотя визуально они и остались в 30000px в высоту. Другими словами, они просто уходят далеко вниз за границу обертки.
    4. К оберточному блоку применяется свойство CSS :hidden, чтобы обрезать все, что выходит за его рамки. В итоге имеем красивые колонки одинаковой высоты.

    Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено.

    Реализованный с помощью XHTML и CSS.

    Вот так он выглядит в миниатюре:

    Особенности:

    • Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
    • HTML-код основной колонки расположен до начала кода обоих сайдбаров.
    • Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
    • Универсальность — макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с «резиновой» шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
    • Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
    • Валидный XHTML, валидный CSS.

    HTML-код

    Основа макета выглядит следующим образом:

    В связи с тем, что в «резиновом» варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr . При фиксированной верстке данный контейнер не нужен.

    CSS-код

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

    #wrapper { /* для фиксированной ширины */ width: 900px; margin: 0 auto; /* для "резиновой" ширины width: expression((documentElement.clientWidth||document.body.clientWidth)<995?"1000px":""); min-width: 1000px; */ } #container { width: 100%; background: #D5FFD5; /* фон основной колонки */ } * html #container {height: 1%;} #container:after { /* закрываем плавающие блоки */ content: "."; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; } #sub-container { float: left; border-right: 200px solid #BFF2FF; /* фон правого сайдбара */ /* для фиксированной ширины */ width: 700px; /* для "резиновой" ширины width: 100%; margin-left: -200px; */ } #wrpr { /* для "резиновой" ширины margin-left: 200px; */ } #content { width: 100%; float: left; } #text { border-right: 200px solid #FFF2BF; /* фон левого сайдбара */ } #left { float: left; width: 200px; margin-left: -200px; background: #FFF2BF; /* фон левого сайдбара */ position: relative; } #right { float: left; width: 200px; margin-left: -400px; background: #BFF2FF; /* фон правого сайдбара */ border-left: 200px solid #FFF2BF; /* фон левого сайдбара */ }

    В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.

    Разметка страницы

    HTML часть

    Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

    1 2 3 4 5 6 7 8 id = "page" > <div id = "main" > </ div >

    То есть нам необходимо сделать так, чтобы блок

    с идентификатором main и блок
    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое