Как на JS сделать колонки одинаковой высоты?

Question

[Cheizer]

Как на JS или JQUERY сделать так, чтобы колонки слева и справа, были одинаковы по высоте?
На CSS так не сделать. А на JS сложновато для моих умений задачка.
Сложность в том, нужно чтобы слева и справа первые колонки, высоту делали по самой большой из них.
И вторые тоже, по самой большой из них обоих. То есть, колонки друг напротив друга, должны быть одинаковыми по высоте.

Сейчас они неровные:


А вот как нужно, чтобы ровные были:

Answer 1

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

Вообще-то на CSS можно без проблем такое сделать. По пути наименьшего сопротивления → на гридах с параметром 1fr для шаблона по высоте. На флексбоксах тоже такое можно муткануть, но не так приятно, как на гридах.

А на JS надо брать размер элемента, можно сразу три, чтобы сравнивать и брать больший, а затем присваивать его всем в качестве min-height (иначе при перерасчетах он будет всегда фикс высоту выдавать).

Желательно это все завернуть в функцию, которую вызвать при инициации скрипта И запустить в вотчере события изменения размера окна.

Comments

[Cheizer]

Спасибо, да, сейчас умею делать ВСЕ 4 колонки одинаковой высоты, но не так надо, нужно по парам и по самой большой из двух в паре. Это пока сложно. На CSS не сделать такое. Дело в том, что и так на FLEX уже верстка и она по высоте 3 колонки родителя одинаковы, но вот в них вложены колонки, и с ними проблема, гриды не кроссбраузерны, стараюсь не использовать пока, только флекс.

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

Роман Кузнецов, вообще-то у гридов не все так плохо. Префиксы и базовые возможности завезены даже в IE.
Кроме того, что IE умер. Он сам при открытии настойчиво предлагает скачать край.

[Cheizer]

Арсений Матыцин, Edge не тянет вроде он, неплохо да, но не совсем. Уже пробовал.

Answer 2

[Cheizer]

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

jQuery(function($){
	
	var max_col_height = 0; // максимальная высота, первоначально 0
	$('.box_one').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_one').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
//////////	
	var max_col_height2 = 0; // максимальная высота, первоначально 0
	$('.box_two').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height2) { // если высота колонки больше значения максимальной высоты,
			max_col_height2 = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_two').height(max_col_height2); // устанавливаем высоту каждой колонки равной значению максимальной высоты
	
});

Answer 3

[Надим]

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

Comments

[Cheizer]

Таблицы не помогут, посмотрите, там три колонки, основные, в левой и правой колонке по два блока ВЛОЖЕННЫХ, их и нужно сделать одинаковыми по высоте.

[Надим]

Роман Кузнецов, так они и будут одинаковые по высоте! Это же таблица!!!

<table style="width: 100%;">
<tbody>
<tr>
<td>Заголовок</td>
<td>Заголовок</td>
<td>Заголовок</td>
</tr>
<tr>
<td>Тест 1</td>
<td rowspan="2">Контент</td>
<td>Тест 3</td>
</tr>
<tr>
<td>
<p>Тест 2</p>
</td>
<td>
<p>Тест 4</p>
</td>
</tr>
</tbody>
</table>

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

[Cheizer]

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

[Надим]

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

[Cheizer]

Надим Закиров, о нет, это точно нет, дублировать весь контент не вариант. А в таблице весь контент будет на странице.

[Надим]

Роман Кузнецов, придумайте тогда что-нибудь сами. Например, ячейкам таблицы (tr и td) при желании через css вполне можно задать стиль display: block и тогда они перестанут быть ячейками таблицы. Пояснения для ячеек в мобильной версии можно добавлять через псведо-элементы. Могу привести пример, если хотите.

[Cheizer]

Надим Закиров, если не получиться flexом перестроить таблицу, то легче на JS все таки решение найти.