Адаптивные блоки, авто растяжка по height, как сделать?

Question

[Антон Вебсайтовский]

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

Блоки и css код можно посмотреть тут:
https://codepen.io/anon/pen/RLGRMB

На данный момент так, текст ушел за границы.

Comments

[Андрей Федоров]

prgssr.ru/development/grid-fleksboks-i-vyravnivani...

Answer 1

[Павел]

Гуглите: jquery equal height
Первый вариант:
https://github.com/mattbanks/jQuery.equalHeights

Comments

[Антон Вебсайтовский]

можно же на css сделать.

Answer 2

[Павел]

var k = jQuery.noConflict(); function equalHeight(group) { var tallest = 0; group.each(function() { thisHeight = k(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); }
  k(document).ready(function(){
  equalHeight(k(".column")); });

даешь классы .column всем колонкам и готово

Comments

[Антон Вебсайтовский]

так вроде реализовывают на css, помню были блоки у меня. но где не нашел.

[Павел]

Антон Вебсайтовский, да самый простой способ сделать на flex , но я привык к js потому что это решение везде работает , а флекс такой флекс...
впрочем есть и другие способы на css

[Антон Вебсайтовский]

mrusklon, флекс, да но не во всех браузерах, а js везде работать будет.
я подумал что там пару строк в css не хватает. чтобы реализовать мою потребность.

[Павел]

Антон Вебсайтовский, ну я так понял что по любому необходима одинаковая высота так как если убрать у .glblock фиксированную высоту , будет просто адаптивная высота но не аналогична всем блокам
поэтому и дан такой пример с equal

[Антон Вебсайтовский]

сделал так:


у всех 4 блоков есть класс glbga, его в js и прописал. и чет не работает.

[Павел]

Антон Вебсайтовский, и вот это убрал? joxi.ru/LmGyDBoHRYjWLA

[Антон Вебсайтовский]

я сделал так:

.glblock{
height: auto;
display: block;
position: relative;
background: #42B3E5;
margin: 40px 50px 50px 0;
z-index: 0;
text-align: center;
border-radius: 2px;
}

изменил height: auto; на авто.
теперь растягивает, но по высоте блоки разные.

[Антон Вебсайтовский]

это на css, чет еще добавить чтобы все они были одной длины и js не нужен )

[Павел]

Антон Вебсайтовский, https://codepen.io/mrusklon/pen/zEKoex вот у них у всех одинаковая высота , только надо css добавить чтоб синий фон растягивался типа height: 100% и еще пару правил..

[Антон Вебсайтовский]

mrusklon, щас попробовал. чет не але. и по ссылки у блоков высота не одинаковая.

[Павел]

Антон Вебсайтовский, а то тогда что? joxi.ru/n2Yd59oCj5aZxm

[Антон Вебсайтовский]

там в js надо класс заменить на .glblock и все ок.

[Антон Вебсайтовский]

но хотелось бы реализовать на css пробую разные варианты.

[Антон Вебсайтовский]

есть косяк, если сжимать браузер то текст выходит за рамки. надо f5 нажимать чтобы js сработал.
растянулись и все ровные ! но когда раскрыл браузер, то блоки такие и остались.

[Павел]

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

[Антон Вебсайтовский]

mrusklon, проверь сам. я уже проверил.

[Павел]

Антон Вебсайтовский, кому надо мне или вам? Я посмотрел , высота блоков не изменилась во первых , во вторых если изменить содержимое которое влияет на высоту , то по таймеру высота пересчитается

[Антон Вебсайтовский]

мне конечно, но не работает.

[Антон Вебсайтовский]

я применил этот способ https://osvaldas.info/flexbox-based-responsive-equ...

работает, все ок, но там флекс. в старых не работает.