• Главная  
• Блог  
• Колонки одинаковой высоты

Колонки одинаковой высоты на JQuery

Задача: Есть, допустим, несколько блоков div, которым надо сделать одинаковую высоту, независимо от содержимого.

Решение: В интернете много всяких решений. Но мне понравилось одно на JQuery. Делается просто и со вкусом. Итак, кодим. Для начала создаем структуру:

<div>
  <div class="first column">1<br/></div>
  <div class="second column">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/></div>
</div>

Класс column обязателен, добавим немного стилей:

.column {
    width : 20%;
    float : left
}
.first {
    background : red
}
.second{
    background : blue
}

Подключаем JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

И сам скриптик:

<script>
    function equalHeight(group) {
        var tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    $(document).ready(function(){
        equalHeight($(".column"));
    }); 
</script>

Что тут и как работает?

А просто вызывается функция equalHeight, которая сравнивает высоту блоков, и задает всем блокам, имеющим класс column, одинаковую высоту через инлайн-стили. Все просто.

Обновление

За окном шел 2019 год, и решение немного устарело. Для более современного решения используем скрипт matchHeight.

Колонки одинаковой высоты на CSS Flex

Если вы верстаете сайты только под современные браузеры, то вам еще лучше. Вы можете отказаться от использования Javascript в сторону использования CSS Flexbox или CSS Grid.

<div class="list">
    <div class="list__item"></div>
    <div class="list__item"></div>cod
    <div class="list__item"></div>
    <div class="list__item"></div>
</div>

.list {
    display   : flex;
    flex-wrap : wrap;
}
.list__item {
    display        : flex;
    width          : 25%;
    flex-wrap      : wrap;
    flex-direction : column;
}

See the Pen Equal Height Columns in CSS Flex by Pavel Saik (@PavelSaik) on CodePen.