Плагин EqualHeight jQuery — палочка-выручалочка для фронтэнд-разработчика

Часто при верстке веб-страницы можно столкнуться с проблемой, что блоки имели одинаковую высоту, независимо от того, какое количество контента располагается внутри. В инлайновых и блочных стилях все хорошо и замечательно, пока пользователь не решит, что он хочет больше текста. Вот тогда вся верстка начинает ломаться и ехать. В итоге пользователь получает блоки из разряда «кто в лес, кто по дрова».

verstka

Конечно, можно выкрутиться из сложившейся ситуации, написав код на flexbox CSS. В этом случае задается значение в стилях для блоков display: flex или display: inline-flex, где флекс-элементы занимают всю доступную высоту родительского контейнера. Однако, когда вы используете свойство flex-flow: column, главная ось начинает располагаться вдоль родителя и высота блоков будет вычисляться в зависимости от контента, если она не была задана жестко через height.

plagin

Чем удобнее плагин EqualHeights?

  • Достаточно всего лишь одной строчки кода на JavaScript;
  • гибкость шаблона — скрипт использует свойство min-height, поэтому при изменении размера содержания колонки (например, с помощью запроса AJAX) или окна браузера структура шаблона сохранится;
  • производительность — не понадобится создавать никакой дополнительной разметки и классов.

Как подключить плагин EqualHeights jQuery к проекту или странице

Скачайте плагин в проект (официальный репозиторий и документация находится на GitHub в открытом доступе) и подключите после jQuery строчку:

<script type="text/javascript" src="jQuery.equalHeights.js"></script>

 

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

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-4148525501306400"
data-ad-slot="4192692151">


Как использовать EqualHeights

Выравнивание блоков происходит, когда вы передаете класс или id блока, который необходимо выравнять. Но так как id — это универсальный идентификатор для элемента и второго такого с таким же именем на странице быть не может, то целесообразнее использовать классы, когда вы хотите выровнять несколько колонок.

$(document).ready(function(){

   $('.класс_блока').equalHeights();

});

Что делать, если не работает EqualHeights?

Вы подключили плагин к проекту, но он не сработал и блоки все равно как были разной высоты, так и остались. Почему?

Вариант первый — банальные опечатки и неверное подключение. Проблема выглядит так: страница загрузилась, div-ы не выровнялись.

  1. Сначала проверьте правильность CSS-селектора блоков в скрипте в основном файле с js.
  2. Проверьте порядок подключения скриптов на странице index.html. Первым должна подключаться библиотека jQuery, за ним скрипт плагина и только потом после него файл main.js.

Случай второй — скрипт из main.js не успевает загружаться вместе с DOM-деревом страницы. Тогда ситуация будет выглядеть так: страница отрисовывается - блоки на ней разной высоты, страница завершила загрузку — блоки выровнялись. Это связано с тем, что js-скрипты в main выполняются линейно от начала файла к концу. Поэтому, когда в вашем проекте много js-скриптов и main.js большого объема, можно разбить его на несколько файлов, оптимизировать код либо использовать асинхронную загрузку или loader.

Плагин EqualHeight jQuery — палочка-выручалочка для фронтэнд-разработчика: 3 комментария

  • Этот скрипт не работает, если меняется высота блока.

    уменьшаем ширину экрана, таекст астановится много и он начинает выходить за высоту(

  • Возможно оно так и есть. Я от этого плагина отказалась где-то полгода назад, когда перешла на flexbox. На проектах, где не требуется поддержка IE8-IE9 и OperaMini почти повсеместно используются флексы, у которых этой проблемы нет. И кучу медиа-запросов тоже писать не нужно. К тому же в марте 2017 года браузеры утвердили поддержку CSSgrid.

  • Уважаемые вебмастера!

    Подскажите пожалуйста кто сталкивался с такой проблемой:

    скрипт EqualHeights работает на всех экранах при любых условиях — но есть одно НО

    При загрузке страницы с длинным контентом, часть контента выходит (вылезает, не помещается) за границы одного из блоков.

    Причем есть странность — если бы код совсем не сработал — блоки были бы просто разной высоты.

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

    Но после обновления страницы f5 «глюк» уходит.

    Этот «глюк» появляется периодически, но не систематически. Либо систематику я вывить не смог

    Всем спасибо за помощь

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *