Как задать блокам одинаковую высоту?

Question

[Alex_8x]

Как синим блокам https://codepen.io/Foxmind/pen/dyPBYzR задать одинаковую высоту в зависимости от высоты самого большого из них?
На ум приходят два способа:

1. Таблицы. Но как при использовании таблиц расположить колонки друг под другом на устройствах с маленьким экраном?
   
2. С помощью JS или jQuery. Но хотелось бы обойтись без скриптов.
   

Answer 1

[Арсений Матыцин]

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

Или использовать гриды, просто разбить на блоки и давать порядок в зависимости от разрешения. Типа

grid-template-area: 'header_1 header_2 header_3' 'features_1 features_2 features_3'

на пекарне и

grid-template-area: 'header_1' 'features_1' 'header_2' 'features_2' 'header_3' 'features_3'

на мобилках. Зайти и с другой стороны, выдавая позицию в номерах. Грубо, но свойства есть, дальше поможет интернет. Но смотри поддержку браузерами, осел не вывозит гриды.

Да и таблицами на самом деле сделать можно. Главное обеспечить им адаптивность. Это реально, но геморроя больше, чем в подходах выше.

Так-то еще можно менять положение DOM-элементов с помощью JS в зависимости от разрешения, но кроме меня я не слышал, чтобы кто-то в здравом уме так делал.

Answer 2

[ThunderCat]

flex же

Comments

[Alex_8x]

Не соседним блокам, а вложенным в разные родители (заголовки с описанием на синем фоне)

[ThunderCat]

Alex_8x, логично заголовки отделить от контента и закинуть их во флекс контейнер...

[Alex_8x]

А как быть на мобилках при таком методе? Заголовки на мобилках тогда будут друг под другом. А нужно, чтобы после каждого заголовка был контент блока.

Answer 3

[азаза]

так что ли?
https://codepen.io/natojezlo/pen/yLNvbLV
или вы про заголовки?

Comments

[Alex_8x]

Про заголовки на синем фоне (стандарт, голд и т.д.)

[азаза]

Alex_8x, в чем проблема задать определенную высоту? height
на медиа запросах регулировать ее

[Alex_8x]

В том, что если контент менеджер решит дописать текст в этот блок, то часть текста обрежется. Хотелось бы более универсальное решение.

[азаза]

Alex_8x, overflow-y auto
тогда наверное только через js

[Alex_8x]

overflow-y auto лишь уберет обрезание текста, но не установит одинаковую высоту для этих блоков.

[азаза]

Alex_8x, я в курсе
можно задать изначальную высоту
overflow даст скролл если текста будет больше чем высота

тогда ищите как через js сделать

[Alex_8x]

Да, тоже к js склоняюсь. Скролл не вариант.

Answer 4

[Dolosweb]

Просто задайте параметр min-height: нужна высота
если надо чтобы было не выше конкретной высоты - то overflow: hidden;

Comments

[Alex_8x]

Высота может меняться в зависимости от контента. Если установить конкретную высоту через min-height и добавить overflow: hidden, то часть текста может обрезаться. Или я чего-то не понимаю?

[Dolosweb]

Alex_8x, Для того что все объекты имели одинаковую высоту надо чтобы содержимое тоже было одинаковым по размеру. Это аксиома
Но для того чтобы блоки разной высоты были одинаковыми - надо чтобы все они были равны высоте самого высокого блока - это тоже аксиома

И этого следует что в трехлитровую банку нельзя налить больше 3 литров жидкости, но меньше залить можно.

Answer 5

[Антон Усачев]

Я так понял, что данный прайс будет с ограниченным количеством элементов (3 штуки), поэтому можно вот так хакнуть через грид. Для узких экранов просто по медии менять арии и количество колонок.



Остальное, что внутри, как в примере ниже:

Comments

[азаза]

он имел в виду там где заголовки на синем фоне

[Антон Усачев]

natojezlo, я уже понял.