Как сделать колонки одинаковой высоты css

Обновлено: 07.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В этой статье обсуждаются некоторые методы и техники создания div колонок, а также их выравнивания по высоте. Требования к этим способам будут простые – работоспособность во всех браузерах (даже в IE6). Все эти методы будут реализованы на 3 колоночном div шаблоне.

Создадим шаблон, в котором все три div колонки будут растянуты по одинаковой высоте.

Способ 1: использование атрибута display:table

В этом методе мы будем использовать список или один div блок, который будет содержать набор колонок. Внешний div блок будет иметь атрибут display:table, все внутренние display:table-cell. По технологии, все колонки растянуться по единой высоте.

HTML разметка

CSS стили

Эта техника слишком проста и легка в реализации. Этот способ намного проще, нежели все остальные. Это может сохранить вас от головной боли.

Margin отступ в этом случае будет эквивалентом cellspacing в табличной верстке. Также можно использовать ширину border (только цвет выставить идентично фону), или поиграться с самой шириной колонок.

Этот вариант не работает в IE7 и версиях ниже. Может пройти слишком долго времени, пока IE7 станет новой проблемой IE6 или IE5. Одним словом, не слишком приемлемый способ в плане кроссбраузерности.

Способ 2: использование JavaScript

Этот метод основывается на использовании JavaScript, который автоматически меняет высоту колонок. В этом примере использован jQuery для растягивания div колонок по высоте.

HTML разметка

CSS стили

JavaScript (jQuery)

Вы можете вынести код в отдельный файл и подключить. Или прямо прописать в контексте HTML кода. Только убедитесь, что код будет идти после подключения jQuery библиотеки.

В этом коде все простейшим образом. Мы собираем коллекцию div блоков, которые внутри .container div, после чего присваиваем им единую высоту.

Не нужно писать много CSS кода, чтобы растянуть колонки по высоте. Также работает во всех популярных браузерах.

Если JavaScript не доступен браузеру, колонки не будут растягиваться. Не стоит переживать по этому поводу… попробуйте найти сайт на котором нет JavaScript. Практически у 99,99% пользователей JavaScript доступен в браузере.

Способ 3: искусственные колонки

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

HTML разметка

CSS стили

Это очень просто, не потребует много CSS кода.

Вы не сможете менять ширину колонок. Если нужно будет больше или меньше колонок, придется перерисовывать фоновое изображение и менять CSS код. Одним словом, придется все переделывать!

Способ 4: Использование отдельных div элементов для фона каждой колонки

HTML разметка

CSS код

Выглядит сложно, не так ли? Если вы усвоите этот принцип, тогда поймете что он очень простой. Эта техника основана на следующих 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 кода.

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

Каждый способ создания div колонок имеет свои преимущества и недостатки. Советую использовать последний, если вы ищете решение на чистом CSS коде.

Если знаете еще способы растягивания div колонок по высоте, рад буду узнать! Пишите в комментарии!

Проблема создания колонок одинаковой высоты достаточно известна. Суть её в том, что при вёрстке float-блоки колонок имеют разные высоты, согласно своему содержимому.

В идеале же, нужно получить равные колонки

Всё это конечно интересно, но при создании адаптивного дизайна ни один из этих методов не работает как следует.

Пробившись с этой задачей несколько дней, я пришёл к выводу, что легальных и достаточно простых способов её решить всего ничего:

использовать таблицы (table)
использовать display: table (и его производные)
использовать javascript

Нетерпеливые могут посмотреть рабочий демо-пример.

HTML-разметка

Для демонстрации я буду использовать вот такой html-код:

Это достаточно типовая схема модульной сетки на две колонки:

общий контейнер main
два блока-колонки content и sidebar1
каждый блок сопровождается своим wrap-блоком

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

Как сделать адаптивность

При фиксированной ширине сайта адаптивность осуществляется путём отдельных @media-правил под каждый диапазон разрешений. Достаточно распространён следующий вариант:

То есть сайт верстается с неким базовым разрешением, например 960px. Если разрешение экрана больше 1200px, то прописываются стили, где ширина контента и сайдбара становится больше. Иногда добавляют ещё одну колонку или какие-то блоки.

Если же разрешение ниже базового, то размеры колонок уменьшают. Как только экран становится совсем узким, чтобы колонки отображались в читабельном виде, их размещают уже одна под другой. Обычно для этого достаточно указать

На демо-примере используется именно такой вариант верстки. Покажу как это делается.

Вначале задаётся общая ширина контейнера:

Первое правило центрирует блок в браузере. Второе - выставляет ширину 100%. Третье ограничивает размеры максимальной шириной. Таким образом размер блока не превысит 960px.

Внутренние блоки позиционируются так:

Суммарная ширина блоков должна быть равна 100%. Выравнивание float также произвольно. В этом примере контент располагается справа. Чтобы переместить его влево (то есть поменять колонки) достаточно у div.content указать .

Теперь зададим @media правило для узких экранов (менее 767px):

Сразу покажу как рассчитать точные размеры колонок из px в %. Код на less, кто им не пользуется могут воспользоваться обычным калькулятором.

В css-less используем так:

То есть можно указать произвольные размеры (@CONTENT_WIDTH и @SIDEBAR_WIDTH), LESS сам пересчитает их в проценты.

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

Вот полный код скрипта:

То есть всё шаманство в функции column2height(), которая первый раз срабатывает при загрузке документа, а второй - при изменени размеров браузера.

Блоки, которые требуется сравнивать, указываются один раз (чтобы после их не искать). Если требуется выровнять три колонки, то можно переписать column2height() под нужное количество элементов. Там в общем-то только сравнение высот на поиск максимальной.

Достоинства метода

К минусам можно отнести только требование наличия включенного javascript у посетителя. По современным меркам это уже не критично.

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

И так для начала создадим наш тестовый макет сайта. Для начала он будет состоять из блока wrapper (это обёртка для всех остальных блоков), верхнего блока под названием header и двух колонок leftcol , rightcol . Для колонок с помощью css зададим обтекание float: left . Это нужно для того, что бы блок-контейнер, в котором находятся блоки с контентом был зависим от этих блоков. Тоесть менял свою высоту в зависимости от высоты контента.

Для каждой колонки создаём обёртку wrap , сколько колонок столько и обёрток. Так же задаём им свойство float и ширину 100%. Передаём обёрткам бэкграунды колонок, теперь за цвет колонок отвечают обёртки. Назначаем всем колонкам и блокам относительное позиционирование position:relative .

Смещаем слой wrapleftcol влево на 780 пикселей right: 780px; . 780 пикселей ширина правой колонки. После сдвига слоя мы увидим слой wraprightcol .

Сдвигаем назад блоки с нашими колонками ( они сдвинулись вместе с слоем wrapleftcol) left: 780px .

Обрезаем всё что вышло за рамки слоя wraprightcol overflow:hidden

У Internet Explorer есть баг с подсчетом ширины колонок, так что свойство padding здесь не кроссбраузерно. Зададим поля за счёт уменьшения ширины колонок и увеличения смещения. Верхние и нижние поля можно задать с помощью padding. Что бы избежать проблем с высотой плавающий блоков добавляем после обёрток див clear. Полный код выглядит так.

Вот таким вот не хитрым способом я сделал колонки одинаковой высоты на css для сайта.

Читайте также: