0
89
2018-12-07

jQuery - Как сделать одинаковую высоту всех блоков по самому высокому из них

Отличное решение для того что бы заставить все блоки получить одинаковую высоту в зависимости от самого высокого из них
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Согласитесь когда высота блоков одинаковых по сути элементов на веб странице идет в разнобой - это не есть хорошо. В начале разработки я "кошмарился" с данными блоками при помощи @mediaquery в CSS стилях и убивал огромное количество времени что бы все это дело привести к более мение качественному виду. Но появился отличный плагин jQuery который приобразует высоту всех указанных элементов в зависимости от самого высокого из них.

Пример работы на CodePen

WordPress подключение

В начале Вам нужно загрузить архив ниже:

Загрузить для WordPress

Подключение скрипта jquery.matchHeight-min.js

Далее распаковываем его и располагаем в корне темы сайта. За тем идем в function.php и в нужном месте (у каждого оно свое, смотрите на код аналогичный представленному мной ниже).

wp_enqueue_script( 'matchHeight', '/matchHeight/jquery.matchHeight-min.js' , array( 'jquery' ), null, true);

Добавление элементов для работы jquery.matchHeight-min.js

И так мы подключили скрипт для автоматической высоты элементов страницы по самому высокому из них. Теперь давайте укажем к каким именно блокам мы должны его применить. Для этого откройте недавно скопированный файл (из моего архива) и добавьте в его конец классы своих блоков.

// ----------------------------------------------------
jQuery(document).ready(function ($) {
    $(function() {
        /*Здесь указываем классы тех блоков высоту которых хотим обработать*/
      $('.SDStudio-ID_MaxHeight, .SDStudio-ID_MaxHeight2').matchHeight();
    });
});
// ----------------------------------------------------

Полезные ссылки

Страница плагина https://github.com/liabru/jquery-match-height