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


Содержание

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

Задача: сделать колонки одинаковой высоты, используя блочную верстку.

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

Решение 1: использование фоновой картинки

  • кроссбраузерность
  • валидный код
  • минимум дополнительных блоков
  • подвал прижимается к низу без проблем (при использовании приема «футер следует после основного блока и имеет отрицательный margin»)
  • дополнительный файл-картинка для фона
  • подходит только для блоков фиксированной ширины
  • не подходит для колонок с абсолютным позиционированием

Автор метода Dan Cederholm (Первоисточник).

Метод основан на том, что блок родитель будет иметь высоту равную высоте более высокой колонки (при условии, что колонки не используют абсолютное позиционирование).

Создаем изображение для фона блока-родителя:
Для наглядности толщина линии взята больше, чем требуется. В «боевых» условиях, для размножаемой по вертикали картинки достаточно линии высотой в 1px. Также помните, что в CSS3 возможно добавление нескольких фоновых изображений к одному элементу. Это может существенно облегчить жизнь при сложных «дизайнах»

.fon <
width: 650px; /* ширина трех блоков */
background: url(path-to/fon.png) repeat-y; /* фоновая картинка. повторяется по вертикали */
float: left; /* чтобы не добавлять div с style=»clear:both;» (не всегда уместно это применять) */
>
.leftColumn <
width: 200px;
float: left;
>
.centerColumn <
width: 200px;
float: left;
>
.rightColumn <
width: 250px;
float: left;
>

Проверено в IE 6-8, Firefox 2-3, Opera 9.5, Safari 3.1

Решение 2: margin + padding + overflow

  • подходит для резиновой верстки
  • не требуется дополнительная картинка
  • валидный код
  • минимум дополнительных блоков
  • не работает в Opera 8, из-за неверной трактовки overflow: hidden;

Суть метода — создать колонки очень большой высоты, «лишнее» обрезать блоком-родителем с помощью overflow:hidden.

.fon <
width: 650px;
overflow: hidden; /* чтобы лишнее обрезалось */
>
.leftColumn <
width: 200px;
float: left;
background: #3d2af0;
padding-bottom: 20000px;
margin-bottom: -20000px;
>
.centerColumn <
width: 200px;
float: left;
background: #e34456;
padding-bottom: 20000px;
margin-bottom: -20000px;
>
.rightColumn <
width: 250px;
float: left;
background: #e3e244;
padding-bottom: 20000px;
margin-bottom: -20000px;
>

Проверено в IE 6-8, Firefox 2-3, Opera 9.5, Safari 3.1

Решение 3: использование обертывающих блоков

  • полная кроссбраузерность
  • применим к резиновой верстке
  • не используются картинки
  • валидный код
  • добавляются блоки по числу колонок
  • пока не ясно как прижать подвал при каркасе на этом методе

Автор метода — Matthew Taylor. Полный перевод — тут. Суть метода — сделать блоков-оберток по числу колонок.

Проверено в IE 6-8, Firefox 2-3, Opera 9.5, Safari 3.1

Колонки равной высоты

Задача

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

Высота колонок зависит от содержания Колонки одинаковой высоты

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

Решения

Решение 1 — использование фоновой картинки

  • кроссбраузерность
  • валидный код
  • минимум дополнительных блоков
  • подвал прижимается к низу без проблем (при использовании приема из «Прижимаем подвал к низу»)
  • дополнительный файл-картинка для фона
  • подходит только для блоков фиксированной ширины

Автор метода Dan Cederholm. Первоисточник. Применим только для колонок фиксированной ширины.

Метод основан на том, что блок родитель будет иметь высоту равную высоте более высокой колонки (при условии, что колонки не используют абсолютное позиционирование).

Высота блока-родителя равна высоте самой высокой колонки

Создаем изображение для фона блока-родителя:
Для наглядности толщина линии взята больше, чем требуется.В «боевых» условиях достаточно линии высотой в 1px.

Фон родителя сделает визуально колонки одинаковой высоты

Решение 2 — margin + padding + overflow

  • подходит для резиновой верстки
  • не требуется дополнительная картинка
  • валидный код
  • минимум дополнительных блоков
  • не работает в Opera 8, из-за неверной трактовки overflow: hidden;

Суть метода — создать колонки очень большой высоты, «лишнее» обрезать блоком-родителем с помошью overflow:hidden.

Родитель усекает лишнее по высоте самой высокой колонки

Метод 3 — использование обертывающих блоков

  • полная кроссбраузерность
  • применим к резиновой верстке
  • не используются картинки
  • валидный код
  • добавляются блоки по числу колонок
  • пока не ясно как прижать подвал при каркасе на этом методе

Автор метода — Matthew Taylor. Полный перевод — тут. Суть метода — сделать блоков-оберток по числу колонок.

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

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

Давайте разберемся, как же добиться такого эффекта. Я приведу несколько способов верстки колонок одинаковой высоты. Каждый из них имеет свои плюсы и минусы. Можете выбрать тот, который больше Вам подходит. Я, например, пользуюсь несколькими из этих способов, в зависимости от того, какой макет верстаю.

Илон Маск рекомендует:  Альтернативный текст

Мы задаем нижний padding: padding-bottom: 30000px; и такой же отрицательный margin: margin-bottom: −30000px; А обворачивающему их блоку #wrapper назначаем overflow:hidden.

Данный способ заключается в использовании фоновой картинки для блока-родителя и подходит только для верстки калонок фиксированой ширины.

Создаем картинку по ширине колонок высотой 1px (bg.png).

Присваиваем ее в качестве фона родительскому блоку #wrapper и повторяем по вертикали и получается, что колонки просто накладываются на фон и возникает эффект равных по высоте колонок.

Этот способ состоит в использовании свойства display: table-* . Код выглядит следующим образом:
HTML:

Этот метод довольно хорош, но он не работает в IE6/7, так как они не «понимают» свойств table-cell и table-row.

Четвертый способ— использование обертывающих блоков.

Метод заключается в создании блоков-оберток по числу имеющихся колонок.
HTML:

Данный метод хорош тем, что он кроссбраузерен, не использует картинок, применим к резиновой верстке.

Еще одно решение проблемы привел в своем блоге Сергей Чикуёнок . Вот код:

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

Колонки одинаковой высоты для адаптивного дизайна

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

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

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

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

Ситуация совсем оказалась печальной, когда я стал работать с «полурезиновой» адаптивной сеткой, где меняется значение float блоков (left и none), а высота блоков должна меняться к auto при float:none .

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

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

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

В итоге остался только один вариант — использование js-скрипта, который будет автоматически рассчитывать и выставлять высоты колонок с учетом их «адаптивности».

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

HTML-разметка

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

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

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

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

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

Существует несколько методик. Самый простой — это «резиновый» дизайн — когда все колонки задаются в процентах. Проблема такого дизайна в широких мониторах. При ширине более 1000-1200px абзацы превращаются в одиночные строчки, что ухудшает читабельность текста. Поэтому обычно ширину сайта ограничивают до 1000px (960, 980px), что позволяет без проблем разместить текст и боковую колонку.

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

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

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

То есть растягиваем на всю ширину и убираем «плавание».

«Полурезиновый» дизайн

Вариант с множеством @media хорош, но несколько трудозатратен. Если подумать, то колонки изначально должны быть резиновыми до какой-то определённой базовой ширины. Если размер экрана более 960px, то ширина сайта не меняется и составляет 960px. Но как только размер уменьшился, то размеры колонок меняются пропорционально друг другу. Как только достигается минимум (совсем узкая колонка), убираем «плавание» и растягиваем блоки на всю ширину.

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

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

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

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

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

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

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

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

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

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

Алгоритм расчет высот достаточно простой: смотрятся два блока, после этого выбирается тот, который больше и второму блоку выставляется его высота. В моём варианте перед этим выставляется height:auto, с тем, чтобы браузер выставил «правильную» высоту исходных блоков. Если этого не сделать, то высота блоков будет только увеличиваться, но не уменьшаться.

Илон Маск рекомендует:  Что такое код exp экспонента

Для того, чтобы отслеживать «адаптивность», я придумал использовать свойство float блоков. Если оно равно none, то ширина блоков должна быть auto и менять высоту уже не нужно.

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

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

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

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

  • Работает с любой html-структурой, где используются float-блоки.
  • Не требует переверстки.
  • Любая ширина колонок.
  • Прост для понимания и модификации.
  • «Полурезиновая»-адаптивность не требует множества @media-правил.
  • Автоматически распознаётся «адаптивность» для рассчёта высоты колонок.
  • Используется настоящая высота колонок, а не «псевдоколонки».
  • Блоки колонок могут быть произвольно оформлены, включая отступы, поля, границы, фоновые изображения, слошные фоны и т.п.

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

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

Задача: Есть, допустим, несколько блоков div, которым надо сделать одинаковую высоту, независимо от содержимого.

Решение: В интернете много всяких решений. Но мне понравилось одно на JQuery. Делается просто и со вкусом. Итак, кодим. Для начала создаем структуру:

Класс column обязателен, добавим немного стилей:

Что тут и как работает?

А просто вызывается функция equalHeight, которая сравнивает высоту блоков, и задает всем блокам, имеющим класс column, одинаковую высоту через инлайн-стили. Все просто.

Обновление

За окном шел 2020 год, и решение немного устарело. Для более современного решения используем скрипт matchHeight.

Колонки одинаковой высоты на CSS Flex

Если вы верстаете сайты только под современные браузеры, то вам еще лучше. Вы можете отказаться от использования Javascript в сторону использования CSS Flexbox или CSS Grid.

Добавить комментарий ×

Подскажите пожалуйста кто сталкивался с такой проблемой:

скрипт EqualHeights работает на всех экранах при любых условиях — но есть одно НО

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

Причем есть странность — если бы код совсем не сработал — блоки были бы просто разной высоты.

А получается, что блоки одинаковой высоты, и не вмещаются всего пара предложений.

Но после обновления страницы f5 «глюк» уходит.

Этот «глюк» появляется периодически, но не систематически. Либо систематику я вывить не смог

Создание 2-х колонок одинаковой высоты на CSS

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

Это умение применяется практически везде, даже верстая стандартный макет из 2-х колонок, вы столкнётесь с этой проблемой, если вы будете верстать блоками. Так же этот урок направлен на развитие понимания самих принципов блочной вёрстки.

Посмотрите на изображение ниже. При помощи таблиц такой результат достигается автоматически.

Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками.

Почему же так происходит?

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

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

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

Посмотрим, как это выглядит на схеме.

Теперь давайте переходить непосредственно к коду.

HTML

Теперь разберём что к чему.

Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700px. Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон.

Я создал такое изображение и назвал его textured.gif

Теперь смотрим, что получилось в CSS

Теперь если мы посмотрим на результат, то увидим следующие:

В заключение данного урока, для лучшего понимания я приведу пример с изменённым фоновым изображением.

Я создал вот такое фоновое изображение и назвал его textured1.gif

Естественно соответствующим образом изменил одно из свойств в CSS.

Вот что получилось:

Автор урока: Игорь Ермаков.

Опубликовал: Максим Шкурупий.

P.S. от Максима: данный эффект не работает у меня в Firefox.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Шкурупий
Урок создан: 19 Мая 2009
Просмотров: 45441
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Как сделать div одинаковыми по высоте?

Здравствуйте! Есть интернет-магазин, где витрина с товарами имеет следующий вид:

Илон Маск рекомендует:  PHP скрипт сканер+генератор карты сайта

Товары выводятся по четыре в строке., но их блоки имеют разную высоту.
Как сделать, чтобы высота столбцов подстраивалсь под высоту самого длинного блока?
Было такое решение на js, но оно конфликтовало с фильтром товаров, поэтому пришлось его отключить.

  • Вопрос задан более трёх лет назад
  • 2666 просмотров

Что вы городите. Какой флекс?
display: inline-block;
vertical-align: top;

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53416d1b6b608dc9 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Вертикальное выравнивание и колонки с одинаковой высотой

Столько много инфы по этим вопросам, хочу узнать у опытных людей самые используемые(частые) и верные способы. Или JavaScript наше все?

И что по поводу вот этого способа создания колонок одинаковой высоты? Не пойму что за отступ с права остается.

25.01.2020, 21:10

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

Вертикальное позиционирование блоков с плавающей высотой
Всем привет! Есть левый блок с заголовком и правый блок с текстом. Задача отцентрировать.

Как сделать блоки с одинаковой высотой
Подскажите современные способы вёрстки, а то я малость отстал от жизни. Если конкретнее, и.

Блог Vaden Pro

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

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

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

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

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

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

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

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

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

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

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

margin + padding + overflow

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

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

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

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

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

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

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

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

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

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

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

  • большое количество дополнительных контейнеров (их количество соответствует числу колонок – обязательное условие для работы метода).
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL