menex.ru
← Все статьи

Одинаковая высота у блоков

05.08.2019 • Теги: #html #javascript #jQuery

Часто требуется выводить блоки, чтобы они были одинаковой высоты и сами подстраивались под содержимое. Для этого вставляем следующий код

Код HTML

<ul class="products">
    <li class="box height_fix">Содержимое блока 1</li>
    <li class="box height_fix">Содержимое блока 2</li>
    <li class="box height_fix">Содержимое блока 3</li>
    <li class="box height_fix">Содержимое блока 4</li>
</ul>

Код скрипта

<script type="text/javascript">
jQuery(function($){
    var max_col_height = 80; // максимальная высота, первоначально 80
    $('ul.products li.box.height_fix').each(function(){ // цикл "для каждой из колонок"
        if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
            max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
        }
    });
    $('ul.products li.box.height_fix').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
});
</script>

Тэги могут быть разными, вместо списков li могут, могут быть div.