Как сделать блоки div одинаковой высоты / javascript

Как сделать блоки div одинаковой высоты / javascript

Бывают случаи, когда согласно дизайну сайта необходимо сделать колонки одинаковой высоты - например, колонку с основным содержимым и дополнительным (меню, категории, записи или просто реклама). Это можно реализовать разными способами - табличной версткой (не вижу минусов, хотя все считают этот метод доисторическим), заливкой фона (визуальный обман), css3 (column-count, column-width), javascript и другими.

Сегодня мы рассмотрим именно последний. Напишем небольшой скрипт на javascript / jquery.

У нас есть вот такие блоки:

Как сделать блоки div одинаковой высоты / javascript

С помощью скрипта мы сегодня постараемся добиться вот такого результата:

Как сделать блоки div одинаковой высоты / javascript

Итак, перейдем к коду. Для начала сверстаем эти блоки на html.

<div class="columns">
Эти блоки одинаковой стороны. Меньший автоматически растягивается до высоты большего</br>
<div style="border:1px solid green; width:200px; float:left;">
Текст</br>
Текст</br>
Текст</br>
Текст</br>
Текст</br>
Текст</br>
Текст</br>
Текст
</div>
<div style="border:1px solid red; width:200px; float:left;">
Текст</br>
</div>
</div>

Отлично. Теперь сам скрипт. Подключаем его между <head> </head> нашей html страницы. Кстати, в html коде блок - <div class="columns"></div - обязательный, является родительским для наших блоков одинаковой высоты. Скрипт действует так: ищет блок с классом colums, и все блоки внутри него (div) выравнивает до одинаковой наибольшей высоты. Хватит лирики, сам скрипт:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".columns > div"));
});
</script>

Как вы заметили, для начала мы подключили библиотеки jQuery. Можно использовать и другие версии библиотек. Вот и все=) Всем удачи!

Demo

04.04.17
Для просмотра сайта обновите браузер.