Одинаковая высота любых DIV блоков, кроссбраузерно, адаптивно и очень просто

Задача: сделать блоки одинаковой высоты, не используя таблицы, кучу лишнего кода. Чтобы было кроссбраузерно, просто и адаптивно.


Сейчас время флэта, все ровное, одноцветное. Короче дизайнер (или может вы нарисовали) скинул вам макет, где нужно, чтобы некоторые блоки относительно друг другу всегда были одинаковы по высоте.

С виду – ничего сложного, верстальщики же сразу поймут, что это проблема и попробуют решить дивами, но будут ломать иногда голову. Короче, неважно, может вы и гуру, и у вас все прекрасно получается, тогда почитайте другие посты в моей блоге. Я же хочу вам показать простой способ, который я применяю в своей верстке, думаю вам будет полезно хотя бы посмотреть и узнать метод.

Все строится на базе одного jQuery скрипта, под названием matchHeight. Официальную документацию можете почитать тут, скачаете тоже там же (…ну ладно, я не жлоб).

Теперь покажу, как его просто юзать. По сути div блокам, которые нужно выровнять по высоте нужно просто добавить атрибут data-mh.

<div class="left-col" data-mh="lcgroup">контент блока</div>
<div class="right-col" data-mh="lcgroup">контент блока</div>

В параметре data-mh, в кавычках указываете свою уникальную группу, просто придумываете одинаковое название для группы, высоту блоков которых нужно сделать одинаковой. Все. Точка.

Другие публикации