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 в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 12

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

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

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал