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

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

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

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

HTML: высота блоков по умолчанию

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

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

Решение:

Получаем высоту элемента с большей высотой, сравнивая значения атрибутов 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 -->
Опубликовано 13-06-2013 в 11:13


Комментариев к записи: 2

  1. мика:

    Очень полезная статья, все сделал как нужно по ней, и этой действительно оказался единственный способ выровнять DIV. Но появляется странная проблема: при первоначальной загрузке страницы всё отлично, но стоит страницу обновить, как меньший див, ну тот который увеличивался до большего опять становится меньше где-то на треть. Ума не приложу что это за фигня. Очень жду помощи!)

    • Администратор:

      На исходном примере все работает. Откройте отладчик в Chrome (клавиша F12) и смотрите, что там происходит.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты