JQuery: высота элемента

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

Постановка задачи:

Итак, имеем, ставшую уже классической, двух-колоночную верстку. В блоке с CSS классом  content у нас меньшее количество контента, а в блоке  sidebar большее, исходя из их ширины. По умолчанию все будет выглядеть вот так, для наглядности выделил элементы заливкой:

А мне (и вам я надеюсь) нужно, чтобы оба дива были одной высоты, — так смотрится, согласитесь, гармоничнее:

Решение:

Получаем высоту элемента с большей высотой, сравнивая значения атрибутов height у  .content и .sidebar. Диву с меньшим числом присваиваем большее, все просто:

$(document).ready(function () {

  var contentHeight = $('.content').height();
  var sidebarHeight = $('.sidebar').height();
  if (sidebarHeight<contentHeight)
      $(".sidebar").height(contentHeight);
  else if (contentHeight<sidebarHeight)
    $(".content").height(sidebarHeight);

});

Скачать рабочий пример

P.S. Кому интересна верстка, — скажу вам, что в ней нет ничего особенного:

<div class="container">
  <div class="row">  
    <div class="span8 content">
      <p><!-- Тект статьи --></p>
    </div><!-- /.span8.content -->
    <div class="span4 sidebar">
      <p><!-- Боковая колонка --></p>  
    </div><!-- /.span4.sidebar -->
  </div><!-- /.row -->
</div><!-- /.container -->