Как создать колонки одинаковой высоты с помощью jQuery и JS

      Комментарии к записи Как создать колонки одинаковой высоты с помощью jQuery и JS отключены

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

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

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

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

Именно такие моменты заставляют нас прибегать к использованию jQuery или JavaScript для выравнивания высоты колонок, поскольку с помощью CSS справиться с этой задачей не удастся.

Пример на jQuery

В данном примере поиск элементов, которым нужно задать одинаковую высоту происходит по родителю.

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

Пример на JavaScript

var max_col_height = 0; // максимальная высота, первоначально 0
var columns = document.getElementsByClassName("column"); // получаем массив колонок (всех элементов класса column)
for (var i = columns.length - 1; i >= 0; i--) { // прокручиваем каждую колонку в цикле
	if( columns[i].offsetHeight > max_col_height ) {
		max_col_height = columns[i].offsetHeight; // устанавливаем новое значение максимальной высоты
	}
}
for (var i = columns.length - 1; i >= 0; i--) {
	columns[i].style.height = max_col_height; // устанавливаем высоту каждой колонки равной максимальной
}

Изменение экрана

Что делать если происходит изменение экрана?  Все достаточно просто смотрим код ниже на примере jQuery

jQuery(window).resize(function() {
        resizeBlockEach('.myclass');
});

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