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; // устанавливаем высоту каждой колонки равной максимальной
}
Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

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

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

  • Илья2 января 2015 в 13:01 #

    Код javascript может быть после всех колонок, самое распространённое и простое решение - сделать его перед закрывающим тегом , но можно подключить его и в шапке, если обернуть в window.onload = function() { ... } - чтобы срабатывало только при полной загрузке содержимого окна.

  • Иван25 мая 2015 в 20:05 #
    $(document).ready(function(){
    		function maxh(colums){
    			colums.height(Math.max(colums.height()));
    		};
    		maxh($(".main div"));	
    });

    А так не красивее?

  • Андрей11 октября 2015 в 12:10 #

    Вот мне как раз надо реализовать трехколоночный макет с адаптивным дизайном:

          <div class="container">
                <div class="column green"></div>
                <div class="column red"></div>
                <div class="column blue"></div>
            </div>
    .column
    {
      float: left;
      width: 33.333333333333333333333%;
    }

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

    Кто что скажет?

    • Миша12 октября 2015 в 08:10 #

      Андрей, во первых я бы рекомендовал сделать такие соотношения: 33%, 34%, 33%. А то что у вас за три в периоде.

  • Сергей28 октября 2015 в 06:10 #

    Добрый день, Миша!
    Вот нашел у Вас на сайте заметку. И хочу вставить свои "пять копеек" по поводу высказывания
    "... (на CSS такое реализовать не получится)."

    Недавно шастая про необъятным просторам, наткнулся на статью от 2009 года.

    "Две float-колонки одинаковой высоты"

    http://chikuyonok.ru/2009/06/float-columns/

    .
    не сочтите за спам или рекламу, т. к. к автору ни какого отношения не имею.
    И решение ведь хорошее и на чистом CSS (ну оно и понятно, в те годы приходилось изворачиваться, кто как мог.)

    И Вам спасибо за труды, очень помогли.

  • Denis13 ноября 2015 в 02:11 #

    Может кому-то пригодится.
    У меня была проблема с определением высоты из-за загрузки картинок.
    Страница сначала подгружала структуру, скрипт определял высоту и только потом подгружались картинки, что обрезало колонку.
    Выход - обернуть скрипт в $(window).load(function () {...}

    jQuery( document ).ready(function($){
    	$(window).load(function () {
    	var max_col_height = 0; // максимальная высота, первоначально 0
    	$('.item').each(function(){ // цикл "для каждой из колонок"
    		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
    			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
    		}
    	});
    	$('.item').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
    	});
    });
    • Сергей13 ноября 2015 в 05:11 #

      А разве

      jQuery( document ).load(....)

      не подойдет?

      вот как бы цитата с

      http://jquery.page2page.ru

      "С помощью стандартных средств javascript, вы можете обработать событие готовности страницы — onload. Однако, оно будет вызвано только после того, как будет сформирована абсолютно вся страница, в том числе, когда будут загружены все картинки и другие мультимедийные элементы. В то время как событие ready происходит в момент готовности дерева DOM, что происходит раньше начала загрузки "тяжелых" мультимедийных файлов. Это оптимальный момент, когда можно приступить к установке обработчиков различных событий и выполнять другой подготовительный javascript-код."

      • Denis13 ноября 2015 в 10:11 #

        На моём сайте такой вариант не заработал. ;)

        • Миша13 ноября 2015 в 11:11 #

          Кстати с подгрузкой картинок это вообще отдельный разговор. Если masonry будете использовать, то ещё намучаетесь. Советую глянуть скрипт imagesLoaded.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Да, точно)

  • Владимир: и на третьей строке не хватает скобки ) закрывающей if :)

  • Миша: Добрый вечер! Рекомендую получить ID пользователя через функцию get_current_user_id().

  • Дмитрий: Миша, подскажите пожалуйста, я использую такой редирект, но он не срабатывает: add_action( 'template_redirect', funct...

  • Миша: Ну как не определена - это аргумент функции. Или я просто вас не до конца понимаю.