Css все блоки одной высоты

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

Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%, расположен слева от первого блока). Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.

Техническое уточнение

Ранее подобные задачи решались с помощью TABLE-TR-TD семейства табличных тэгов, но такой подход нарушал принцип отделения структуры данных в разметке (markup — HTML) от способа их стилизации (styling — CSS), поскольки сами данные по характеру представленной информации вовсе не были табличными, а только использовали сходный табличному метод отображения на странице:

Позже стандарт СSS был расширен дополнительными значениями table, table-cell для параметра display, что позволило использовать привычные DIV, SPAN элементы в html-структуре разметки страницы и задавать для них соответствующие css-правила для отображения в виде таблицы с колонками сообщающимися в процентном соотношении как по ширине так и по высоте:

#wrapper < display: table; >#navigation, #content

Казалось бы задача была решена, но к сожалению, такой подход не работал в старших версиях браузеров (IE 6, IE 7) заставляя верстальщиков искать другие подходы. Довольно распространенным стало решение с помощью вложенных элементов-оберток смещение которых относительно друг-друга позволяет добиться визуального эффекта равных по высоте колонок:

 
 
 
. перечень a-href ссылок.
 
. содержание.
 
 
 

#navigation, #content < position: relative; float: left; left: -50%; >#navigation < width: 50%; >#bg-one, #bg-two < position:relative; float: left; width: 100%; background-color: #9988ff; >#bg-one < overflow: hidden; >#bg-two

Роль колонок здесь выполняют обертывающие тэги (#bg-one, #bg-two) количество которых дублирует вложенные в них тэги с контентом (#content, #navigation). Такая техника работает даже в IE 6, но ее ощутимым недостатком является необходимость добавления большого количества дополнительных элементов (#bg-one, #bg-two) обертывающих тэги с текстом колонок (#content, #navigation). Количество таких элементов оберток (#bg-N) равно количеству фактических блочных-тэгов с колоноками текста. В приведенном выше примере для добавления еще одной колонки (скажем #advertisement) на одном уровне с #navigation и #content придется добавить еще один общий обертывающий элемент bg-three:

 
 
 
 
..перечень ссылок a href.
 
..содержание статьи.
 
. рекламные объявления.
 
 
 
 

#navigation, #content, #advertisement < position: relative; float: left; left: -64%; >#navigation,#content < width: 32%; >#bg-one, #bg-two, #bg-three < position: relative; float: left; width: 100%; background-color: #9988ff; >#bg-one < overflow: hidden; >#bg-two < left: 32%; background-color: #99ff99; >#bg-three

В таком случае html-разметка заметно усложняется – причина наличия обертывающих тэгов неочевидна. Таким образом отказываясь от html-таблиц из-за плохой читабельности разметки мы приходим к еще менее читабельному коду. Ситуацию можно улучшить если перенести обертывающие тэги на один уровень с колонками:

 
 
..перечень ссылок с a href..
 
. содержание статьи.
 
 

#wrapper < position: relative; float: left; width: 100%; >#navigation, #content < position: relative; float: left; width: 50%; >#navigation-bg < position: absolute; left: 0; width: 50%; height: 100%; background-color: #ffaaaa; >#content-bg

В таком случае элементы c фоном (#navigation-bg, #content-bg) расположены перед тэгами содержащими текст колонок, что заметно улучшает понимание разметки. Но к сожалению IE 6 не понимает процентных значений заданных в параметре высоты для блочных элементов с абсолютным позиционированием, а для более свежие версии браузеров поддерживают display: table правило, которое позволяет избежать добавочных div-элементов содержащих фон колонок (в примере выше #content-bg, #navigation-bg).

Решение

Читая задание становится заметным что разметка текста с прицелом на последующие применение css-правила display: table, также содержит один лишний тэг:

Ведь в таком варианте зависимость высоты колонок двунаправлена, то есть высота блока заданного тэгом nav зависит от высоты блока заданного тэгом article и наоборот — блок article зависит от высоты блока nav. Хотя в данном случае только высота блока nav должна подстраиваться под высоту более длинного тэга article обратная зависимость является лишней:

 
  ..содержание статьи
 

Процентное значения для аболютных элементов также как и display: table работают в браузере IE начиная только с восьмой версии. Значения ширины и длины блока aside берутся из пересчета относительно размеров блока article, так как в CSS координаты и размеры элемента с абсолютным отсчитывается начиная с первого родительского элемента с нестатичным (relative, absolute, fixed) значеним параметра position. То есть ширина блока article (которая составляет 75% от ширины документа) для aside контейнера равна 100%, составляя пропорцию:

То есть 25% свободного экрана в процентном соотношении блока article.
Таким образом мы можем избавиться от лишнего wrapper элемента, отобразить зависимость одной колонки от другой в коде и не прибегать к методу табличного позиционирования для нетабличных данных.

Источник

Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid

Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float , который был тогда основным, не мог справиться с этой проблемой.

Решение с помощью Flexbox

С появлением Flexbox достижение такого поведения стало возможно благодаря добавлению всего одного свойства:

Удивительно! В этом случае прямые потомки по умолчанию выстраиваются в строку и имеют одинаковую высоту.

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

Чтобы исправить это, вложенному элементу следует задать высоту 100%

.flexbox < display: flex; >/* Гарантия, что вложенные элементы с содержимым будут заполнять высоту колонок */ .element

Колонки снова станут равной высоты и будут расти вместе с содержимым вложенного элемента .element .

Решение с помощью Grid

Используя Grid, мы сталкиваемся с похожим поведением:

Подобно Flexbox, прямые потомки будут иметь одинаковую высоту, но их дети нуждаются в явном определении высоты, как и в способе с использованием Flexbox:

.flexbox < display: grid; grid-auto-flow: column; >/* Гарантия, что элементы с содержимым будут заполнять элементы колонок */ .element

Ниже представлена Codepen-демонстрация обоих решений для разного количества колонок в строке:

Какой способ лучше?

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

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

Обновим наше решение с использованием Grid для 3 элементов .column на строке:

В то время, как для Flexbox самый простой вариант был бы таким:

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

Источник

Отзывчивые блоки одинаковой высоты на основе Flexbox

От автора: После публикации поста о том, как я создал отзывчивые блоки одинаковой высоты на сайте Readerrr, я получил несколько полезных отзывов от сообщества веб-разработчиков. Дэниел Стёрм (Daniel Sturm) предложил мне использовать модуль Flexbox из CSS3 вместо JavaScript, а Вирли Питерс (Veerle Pieters) оставил твит «… вы можете сделать это с помощью Flexbox, а JavaScript использовать для подстраховки». Точно! И почему я сам об этом не додумался?! Я читал до этого несколько статей про Flexbox, но сам никогда его не применял, поэтому он совершенно вылетел у меня из головы.

Почему Flexbox? Если вкратце, то модуль Flexbox Layout был создан для решения именно таких задач. Он является эффективным и гибким инструментом для управления, возможно, всеми разновидностями макетов. Благодаря ему практически не возникает задержки по времени между неправильной и правильной отрисовкой внешнего вида макета. При использовании решения на JavaScript тратится время на загрузку документа, затем на загрузку соответствующего JS-файла и, если таковые имеются, на загрузку изображений в блоках. Решение с Flexbox срабатывает мгновенно, а решению на JavaScript потребуются секунды. Но даже в этом случае, решение на JavaScript прекрасно подойдет для людей, использующих старые версии браузеров, которые не поддерживают Flexbox.

Проблема

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

Источник

Одинаковая высота блоков CSS

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

Когда это может пригодиться:

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

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

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

Одинаковая высота блоков с помощью flex

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

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

.container < display: flex; flex-wrap: wrap; >.box < display: flex; padding: 10px; width: 33.3333333333%; >.box_content

Второй вариант

Есть и другой вариант, который может оказаться полезным, если первый по каким-то причинам не подошел. Это использовать свойство flex: 1, что означает, что каждый блок будет занимать равную долю доступного пространства. На примере это выглядит так:

.container < display: flex; >.box < flex: 1; display: flex; padding: 10px; >.box_content

Одинаковая высота блоков с помощью grid

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

Свойство display: grid применяем к контейнеру, чтобы установить его в режим сетки. Затем мы используем grid-template-columns: repeat(3, 1fr) , чтобы определить, что у нас будет 3 колонки с равной шириной (1fr означает равную долю доступного пространства). grid-gap: 20px задает отступы между блоками. Смотрите, как это на примере.

.container < display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 50px; >.box < background: #666; border-radius: 10px; padding: 20px; color: #fff; >@media (max-width:720px) < .container < grid-template-columns: repeat(2, 1fr); >> @media (max-width:470px) < .container < grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; >>

Для адаптивности просто меняйте количество колонок в свойстве grid-template-columns .

grid-template-columns: repeat(1, 1fr); // 1 колонка grid-template-columns: repeat(2, 1fr); // 2 колонки grid-template-columns: repeat(3, 1fr); // 3 колонки

Одинаковая высота блоков с помощью table

В этом примере мы будем применять правила таблицы к тегам div . И стоит подчеркнуть, что использование таблиц для макета может иметь некоторые ограничения в гибкости и адаптивности. Лучше всего рассмотреть альтернативные подходы, такие как использование CSS Grid или Flexbox. Они более современные и гибкие методы для создания макетов.

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

Источник