Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
5 г. назад

Колонки одинаковой высоты на 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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

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

<script type="text/javascript">
  var k = jQuery.noConflict();
  function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
      thisHeight = k(this).height();
      if(thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
    group.height(tallest);
  }        
  k(document).ready(function(){
    equalHeight(k(".column"));
  }); 
</script>

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

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

Комментарии

#Игорь30.11.2011 21:28
Спасибо, мужик! Помогло!!! Ты лучший!!! Ответить
#Levikov24.02.2012 21:05
Спасибо! Ответить
#Алина26.09.2013 12:02
Спасибо!!! Ответить
#Саня27.09.2014 13:25
Огромное спасибо! Всё работает как часы Ответить
#Марьян07.12.2014 21:34
Скрипт не работает, когда высота колонки больше 4000 пикселей. Можно ли как-то это исправить? Ответить
#PaLyCH15.12.2014 16:47
Старая проблема. Не исправить Ответить

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

Наверх