При верстке, иногда может понадобиться задать нескольким div-блокам одну высоту. Например, у вас может выводиться в строку три div-а, окрашенных в какой-нибудь цвет или с картинкой в качестве background-а.

Содержимое каждого блока разное. В первом блоке текст занимает 5 строк, во втором 8, а в третьем его хватило только лишь на 3 строки. Смотрится это, мягко говоря, не очень:

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

Создадим JS-файл и назовем его equalizer.js. Содержимое файла следующее:

function EqualizeColumns(BlockClass) {
  setTimeout(function() {
      var Blocks = document.getElementsByClassName(BlockClass);
      var maxHeight = 0;
      for (var i = 0; i < Blocks.length; ++i) {
	Blocks[i].style.height = "auto";
        if (maxHeight < Blocks[i].clientHeight) {
          maxHeight = Blocks[i].clientHeight; 
        }
      }
      for (var i = 0; i < Blocks.length; ++i) {
        Blocks[i].style.height = maxHeight + "px";
      }
    }, 1);
}

Как видно, скрипт содержит в себе простую функцию EqualizeColumns(), которая вычисляет высоту каждого блока, а затем присваивает всем div-ам максимально найденное значение высоты. Функция ищет и меняет нужные элементы, завязываясь на класс. Это означает, что все блоки, которые вы хотите выровнять, должны иметь одинаковый класс. Например .equalized_block.

Для работы скрипта, его необходимо сначала подключить к html-странице:

<script src="/путь_до_скрипта/equalizer.js"></script>

После этого пропишем в нашем документе немного JavaScript-кода, чтобы функция выполнялась сразу при загрузке страницы:

<script>
window.onload = EqualizeColumns("equalized_block");
</script>

Отлично! Теперь все блоки с классом .equalized_block выравниваются должным образом:

Еще один момент. Если вы используете адаптивную верстку, то регулярно просматриваете внешний вид страницы в разных разрешениях, меняя размер окна браузера. Сейчас наша функция срабатывает только один раз, когда загружается страница. Если сузить окно браузера до определенной ширины, то и сами блоки станут уже. Количество строк текста соответственно увеличится. Высота блока в этом случае останется прежней, и текст будет выходить за пределы блока. Конечно, после обновления страницы высота пересчитается и все будет нормально. Посетители вашего сайта вряд ли будут играться с размерами окна своего браузера, но для тестирования постоянно обновлять страницу неудобно. Чтобы высота пересчитывалась при изменении ширины окна, как вариант, можно поставить выполнение функции EqualizeColumns() на событие onResize всего документа т.е. в тег <body>:

<body onResize = "EqualizeColumns('equalized_block');">
Демо
Скачать