Как сделать колонки одной высоты
Как сделать колонки одинаковой высоты
В этом уроке я приведу различные способы, показывающие как можно сделать колонки одинаковой высоты. Все варианты будут разобраны для двухколоночного макета страницы, но они также будут работать для трёх и более колонок (с небольшой модификацией).
Часть примеров реализуется на чистом CSS, другие используют JavaScript. Вы можете посмотреть каждый пример в редакторе Codepen, кликнув по картинке.
1. Псевдоэлемент и абсолютное позиционирование
В медиазапросе, например, для максимальной ширины 860px отменим обрезку содержимого контейнера, обтекание для колонок и скроем содержимое, добавленное с помощью псевдокласса. Ширину колонок сделаем равную ширине блока-контейнера.
2. Внутренние и внешние отступы
В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.
3. По типу таблицы
В данном примере используется особенность html-таблиц, благодаря которой все ячейки одного ряда принимают одинаковую высоту, равную высоте самой высокой ячейки.
С помощью медиазапроса сделаем все элементы блочными и установим для боковой колонки ширину 100%.
4. Flexbox
5. Плагин matchHeight
Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item ), который будет использоваться при активации плагина:
С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.
6. jQuery функция css()
В данном примере определяется высота каждой колонки и проверяется условие, в результате чего колонки принимают одинаковую (наибольшую) высоту.
С помощью медиазапроса отменим обтекание колонок и укажем определение минимальной высоты колонок в зависимости от высоты их содержимого.
2 способа создания колонок одинаковой высоты: при помощи jQuery и на чистом JavaScript
Пример. Предположим, что на странице есть две колонки — контент и сайдбар. Для разных размеров мониторов наш сайдбар должен оставаться одинаковой ширины, а контент — адаптироваться. Как это реализовать?
Тут то и возникает наша проблема — что делать, если высота колонки сайдбара больше высоты колонки контента? Ведь в этом случае сайдбар вылезет за пределы верстки сайта.
Это лишь один из примеров, когда необходимо выровнять высоту каждой из колонок при помощи jQuery или JavaScript (на CSS такое реализовать не получится).
jQuery
Перед тем, как использовать jQuery код, убедитесь, что у вас уже подключена сама библиотека jQuery. Пара слов о её подключении написана здесь.
Код может располагаться в любой части HTML-документа после подключения библиотеки.
Чистый JavaScript
Код может располагаться в любой части HTML страницы, главное условие — он должен быть после всех колонок.
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Комментарии — 12
А если нужно пару рядов? и текст везде разный?
тут вообще без разницы сколько колонок
Вот мне как раз надо реализовать трехколоночный макет с адаптивным дизайном:
Но я наверное чего-то недопонимаю.
Значит, подключаю плагин, вроде все ничего, колонки одинаковой высоты (судить можно по цвету фона). Но как только сужаю окно браузера, то контент уезжает вниз за пределы блока.
Андрей, во первых я бы рекомендовал сделать такие соотношения: 33%, 34%, 33%. А то что у вас за три в периоде.
Добрый день, Миша!
Вот нашел у Вас на сайте заметку. И хочу вставить свои «пять копеек» по поводу высказывания
«. (на CSS такое реализовать не получится).»
Недавно шастая про необъятным просторам, наткнулся на статью от 2009 года.
«Две float-колонки одинаковой высоты»
.
не сочтите за спам или рекламу, т. к. к автору ни какого отношения не имею.
И решение ведь хорошее и на чистом CSS (ну оно и понятно, в те годы приходилось изворачиваться, кто как мог.)
И Вам спасибо за труды, очень помогли.
Добрый день!)
Спасибо за дополнение.
jQuery( document ).load(. )
вот как бы цитата с
«С помощью стандартных средств javascript, вы можете обработать событие готовности страницы — onload. Однако, оно будет вызвано только после того, как будет сформирована абсолютно вся страница, в том числе, когда будут загружены все картинки и другие мультимедийные элементы. В то время как событие ready происходит в момент готовности дерева DOM, что происходит раньше начала загрузки «тяжелых» мультимедийных файлов. Это оптимальный момент, когда можно приступить к установке обработчиков различных событий и выполнять другой подготовительный javascript-код.»
На моём сайте такой вариант не заработал. 😉
Кстати с подгрузкой картинок это вообще отдельный разговор. Если masonry будете использовать, то ещё намучаетесь. Советую глянуть скрипт imagesLoaded.
Колонки одинаковой высоты
Колонки, получаемые с помощью ячеек таблицы, имеют одну высоту. Это неудивительно, поскольку ячейки взаимосвязаны и при повышении высоты одной ячейки, соответственно увеличивается высота рядом расположенных ячеек. Многие разработчики пытаются произвести подобный эффект с помощью слоёв, т.е. сделать их взаимосвязанными и одной высоты, независимо от объема содержимого. В действительности, при вёрстке слоями высота колонок устанавливается автоматически исходя из объема контента. Поэтому искусственные приёмы по созданию колонок одинаковой высоты противоречат самой идеологии слоёв.
Таким образом, видно чёткое разделение подходов к вёрстке:
Пример 5.32. Использование height
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 5.23.
Рис. 5.23. Колонки одинаковой высоты
Также существуют способы, построенные на визуальном обмане. Колонки кажутся одинаковыми за счёт использования границ в качестве колонок, добавления фоновой картинки или цвета фона. В действительности же их высота, как им и положена, определяется контентом.
Границы в качестве колонок
Суть метода в следующем — устанавливаем слева или справа от элемента границу, ширина которой совпадает с шириной одной из колонок. Понятно, что границы предназначены совсем для других целей, но в данном случае такое их использование позволяет получить желаемый результат. Для этого создаем слой с именем layout и для него устанавливаем стиль, как показано ниже.
В данном примере сочетание свойств float и margin-left позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.
Пример 5.33. Две колонки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 5.24.
Рис. 5.24. Две колонки, созданные с помощью границы
Для первой колонки стилевой код остаётся неизменным, а третьей колонке следует указать свойство 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. Фоновый рисунок
Пример 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.37. Использования фонового цвета для колонок
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Свойство height в примере добавлено, чтобы стало заметно влияние цвета на колонках. В реальности оно не требуется.
У этого метода есть ряд недостатков, которые следует учитывать на практике.
Достоинства у метода тоже имеются, но их можно выразить всего парой слов: это простота и изящность решения. Поэтому этот метод можно довольно часто встретить в вёрстке, в частности, он применяется на сайте W3C.
Колонки одинаковой высоты на CSS
В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Посмотреть примерСкачать
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
То есть нам необходимо сделать так, чтобы блок
Колонки одинаковой высоты
CSS часть
Определим flexbox для основного контейнера, в котором находятся два блока:
Сейчас мы преобразовали блок с идентификатором page во flex-контейнер. На данный момент он занимает всю ширину страницы.
Но давайте сделаем для него максимальную ширину 1200px и выровняем по центру:
Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара:
Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах:
Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи.
Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11.
Вывод
Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое.
Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Отправить статью
Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:
Введите Email ниже:
Ссылка на статью отправлена вам на Email.
7 комментариев к записи
😎 Потрясающее решение двух колонок одинаковой высоты! Альтернативы нет!
Другие решения — либо «обманки», вроде border шириной в aside. Более-менее неплохое решение — придание глобальному контейнеру свойства таблицы (display: table;), а aside и main — свойств ячейки (display: table-cell;). Но и это решение — не то, не очень… А здесь — просто восторг!
Решение простое, изящное, легко подстраивается под себя. Мало того, включает и вариант для мобилок.
Хотя не вполне понятно самое последнее правило:
@media all and (max-width: 700px) <
.
#main < padding-right:40px; >
>
— здесь не видно этого зазора в 40px.
Спасибо большое, беру на вооружение.
А вот интересно, насколько будет правильно прикрутить заголовок и подвал вне контейнера page? Например, сделать глобальный контейнер
#global <
margin: 0 auto;
max-width: 1300px; >
а в него хэдер, затем section наконец, подвал…
Замечательное решение, спасибо автору! Иначе пришлось бы городить отдельный макет для мобилок.
Но у него есть пара проблемочек — решить их можно, но придётся попыхтеть.
1. Когда aside и page выстраиваются лентой, и если в aside много чего наложено, например, меню на много пунктов, на смартфоне меню приходится долго-долго мотать чтоб добраться до статьи. Эффект «тускнеет».
ИМХО, для избавления от этой перемотки, есть 2 решения:
а) В меню давать ссылки не просто на статьи, а ссылки на якорь в начале статьи. Например,
И тогда при нажатии кнопки меню юзер перескочит сразу в начало статьи, а не страницы. А меню останется сверху.
б) Попробовать меню аккордеон — меню будет спрятано в кнопку рубрики — клик и рубрика раскрыла меню рубрики. Такой вариант вполне пригоден для смартофонов. А для десктопов сжимать «гармонь» как-то ну очень необязательно. Есть ли тут универсальное решение, не знаю.
2. Вторая проблема — оказалось, не так просто подобрать ширину, при которой aside и page выстраиваются лентой:
Под мой Note4 я указал 600рх и при портретном смартфоне — всё лентой и хорошо. А вот при ландшафте >600рх есть неприятный эффект: aside с аккордеоном становятся как заказано — 280px, а поле для статьи — маловато. И получается рядом с меню пустое место. Как победить это, ума не приложу!
Хотя, сейчас поэкспериментировал: оказывается, в разных мобильных браузерах всё это по-разному! ёклмн!
4 метода создания колонок одинаковой высоты
Перевод: Влад Мержевич
Одна из немногих вещей, которую не так просто сделать с помощью CSS — это создание колонок одинаковой высоты. Существуют разные подходы, у каждого из них есть свои плюсы и минусы, здесь я хочу показать четыре метода.
Задумаемся над тем, что мы подразумеваем под колонками одинаковой высоты. Как правило, мы не хотим, чтобы контент внутри каждой колонки был одинаковой высоты. Если бы это было так, тогда нет никакой проблемы, поскольку высота колонок, естественно, будет такой же. На деле под колонками одинаковой высоты мы имеем в виду колонки, которые выглядят одинаковыми без контента внутри.
Мы можем достичь этого добавляя фон позади колонок, чтобы они казались равной высоты. В результате получим фиктивную одинаковую высоту.
Желающие сразу смотреть демонстрацию и код могут щёлкнуть на любом изображении идущим перед каждым разделом ниже или обратиться к соответствующему демо.
Фиктивные колонки
Фиктивные колонки существуют уже долгое время. С 2004 года, если быть точным. За это время они были и, возможно, всё ещё остаются методом де-факто для создания колонок одинаковой высоты.
Этот простой трюк использует фоновое изображение которое повторяется по вертикали. Пример такого изображения показан ниже. Я увеличил высоту для наглядности.
Изображение обычно делается высотой в один пиксел, а его ширина совпадает с шириной макета. В том месте, где одна колонка переходит в другую, изображение для фиктивных колонок также должно меняться.
В этом примере мы будем использовать HTML, похожий на то, с чем мы уже работали, хотя я пропущу шапку и подвал, чтобы сосредоточиться на столбцах.
Контейнер будет той же высоты, что и самая высокая из колонок, а фоновое изображение создаёт эффект, словно короткая колонка имеет аналогичную высоту.
Данный метод лучше всего работает для макетов фиксированной ширины, но также подходит и для большинства резиновых макетов.
Вы также не ограничены простым изменением цвета фона. Границы, тени, узоры и др. могут быть добавлены в соответствующем месте фонового изображения. Для выбранных узоров следует создать изображение высотой больше одного пиксела.
Плюсы
Минусы
Псевдоколонки
Мне никогда не хотелось использовать фиктивные колонки. Не потому что это плохой метод, а потому что у меня есть пунктик — никогда не применять изображение для сплошной заливки цветом. Из-за этого я разработал собственный метод получения колонок одинаковой высоты, который за неимением лучшего термина буду называть псевдоколонки.
Он работает аналогично методу фиктивных колонок, который предполагает добавление фона к контейнеру. Это не общий подход к колонкам одинаковой высоты, поэтому он имеет ограниченную область применения, но если вы сталкиваетесь с таким случаем, всё это работает легко и просто.
Мы используем тот же HTML, что и в методе фиктивных колонок выше.
CSS опять же весьма прост. Для разнообразия я выбрал резиновый макет, но вы можете легко всё настроить и для фиксированной ширины.
Основное изменение по сравнению с фиктивными колонками — вместо фонового изображения мы устанавливаем цвет фона. В принципе, это то же самое, что показывать цвет фона контейнера сквозь короткую колонку.
Ограничение следующее — мы заранее должны знать, какая колонка будет короче и в идеале эта колонка должна быть такой на всех страницах сайта. Звучит, как довольно серьёзное ограничение, но на практике, я считаю, одна из двух колонок обычно короче на большинстве, если не на всех, страницах. На тех страницах, где это не так, для исправления достаточно просто добавить больше или меньше контента.
Плюсы
Минусы
Этот метод далёк от совершенства, но вы удивитесь, насколько часто он может применяться на практике.
Границы и отрицательные отступы
На этот метод я наткнулся не так давно на Smashing Magazine в статье Тьерри Кобленца, хотя позже нашёл статью Алана Пирса на A List Apart, написанную несколько лет назад об этом же методе. Используются границы и отрицательные отступы, чтобы создать видимость колонок равной высоты.
Если мы здесь остановимся, то вы увидите отображаемые колонки, однако наша левая граница выталкивает боковую панель прочь и мы должны вернуть её назад.
Плюсы
Минусы
Рекомендую прочесть обе статьи, ссылки на которые я привёл выше, поскольку они предлагают более детальную информацию, чем я здесь. Обе статьи содержат код для использования этого метода с третьей колонкой, а статья Тьерри рассказывает о создании границ между колонками.
Смещение колонок и контейнера
Последний метод создал Мэтью Джеймс Тейлор. Из всех методов представленных здесь, на этот раз он будет работать в самых разных случаях использования.
Я оставил его на конец, так как метод немного сложный и вам, возможно, придётся прочитать несколько раз для понимания как он работает.
HTML похож на то, что мы видели выше, хотя вы заметите дополнительный контейнер div.
Как и в других методах, мы будем использовать эти контейнеры для установки фоновых цветов, которые появятся, словно они принадлежат нашим колонкам.
В CSS происходит несколько больше, чем мы видели до этого момента. Для #sidebar и #content задаётся float со значением left и устанавливается ширина, всё остальное помимо этого является новым.
Ключом этого метода выступает идея, что плавающий контейнер всегда имеет ту же высоту, что его содержимое. Размещая наши колонки внутри плавающих контейнеров, мы обеспечиваем, что контейнеры будут равны высоте самой длинной колонки.
Нам нужно немного позиционирования дабы сдвинуть внутренний div так, чтобы он показывался только там, где мы хотим отображать боковую панель. Это позволит фону у внешнего div проступать сквозь него там, где мы хотим показать колонку с контентом.
Позиционируем внутреннюю колонку и устанавливаем значение right на 75%, оно такое же, как ширина колонки с контентом.
Фоны на месте, но содержимое обоих колонок также сдвигается на 75% влево. Нам нужно сдвинуть их на место.
Мы снова применяем относительное позиционирование и поскольку содержимое обоих колонок сместилось на 75% влево, нам надо сдвинуть это обратно на 75% вправо. Сделаем это установкой значения left в 75%. Теперь всё вернулось назад, где и должно быть.
Плюсы
Минусы
В целом это наиболее надёжный метод и он гарантированно работает в любой ситуации. Я призываю вас поиграть с этим для настоящего понимания и прочитать статью Мэтью несколько раз.
В статье Мэтью идёт макет из трёх колонок и у него также есть демонстрация для четырёх и пяти колонок. Я решил показать макет из двух колонок в надежде что это сделает идею проще для понимания.
Дополнительные ресурсы
Это ни в коем случае не единственные методы создания колонок одинаковой высоты. Крис Койер некоторое время назад поделился несколькими другими методами на CSS Tricks, которые вы можете предпочесть представленным здесь.
Есть также много других методов, которые можно найти немного поискав. Думаю, что данная статья и статья Криса охватывает большинство из наиболее распространённых методов.
Резюме
Колонки одинаковой высоты являются желательной чертой дизайна, но их не всегда легко сделать с помощью CSS-макетов. В идеале мы должны были бы использовать что-то вроде height: 100% и на этом всё, но сейчас мы можем применять любой из методов, упомянутых выше.
Фиктивные колонки просты в настройке, но нужен дополнительный HTTP-запрос для изображения, а любое изменение макета требует новой картинки.
Псевдоколонки ещё проще, но имеют ограниченное применение для случаев, когда относительная высота обоих колонок известна и постоянна на страницах.
Границы и отрицательные отступы сравнительно просты в работе, не требуют предвидения о высоте колонок и прекрасно адаптируются к нескольким колонкам. Только нужно чтобы одна колонка была фиксированной ширины.
Смещение колонок и контейнера работает в большинстве случаев. Не нужно предварительно знать о высоте колонок и можно работать с любым желаемым числом колонок. Этот метод немного сложнее других.
Со временем я ожидаю более простого стандартного решения, но пока этих четырёх методов должно быть достаточно для вашего проекта.
Насколько часто вы делаете дизайн макета с колонками одинаковой высоты? Какой метод создания колонок вы при этом используете?