2 способа создания колонок одинаковой высоты: при помощи jQuery и на чистом JavaScript

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

Пример. Предположим, что на странице есть две колонки — контент и сайдбар. Для разных размеров мониторов наш сайдбар должен оставаться одинаковой ширины, а контент — адаптироваться. Как это реализовать?

Легко — делаем для сайдбара position:absolute, а для контента большое значение margin-right (если сайдбар справа конечно).

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

Это лишь один из примеров, когда необходимо выровнять высоту каждой из колонок при помощи jQuery или JavaScript (на CSS такое реализовать не получится).

колонки div одинаковой высоты
Пример колонок с одинаковой высотой.

Добавьте на каждую из ваших колонок класс .column.

jQuery

Перед тем, как использовать jQuery код, убедитесь, что у вас уже подключена сама библиотека jQuery. Пара слов о её подключении написана здесь.

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

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

Код может располагаться в любой части HTML страницы, главное условие — он должен быть после всех колонок.

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; // устанавливаем высоту каждой колонки равной максимальной
}
Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также