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>

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

  • Администратор: к записи Согласен. »
  • Аптоний: к записи боты спутника жрут слишком много CPU и индексируют »
  • Администратор: к записи На исходном примере все работает. Откройте отладчи »
  • мика: к записи Очень полезная статья, все сделал как нужно по ней »
  • трансферы футбола: к записи Спасибо) работает!))) помогло »
  • Alex: к записи Спасибо за инфу, друг. »
  • Kuzma: к записи Да он закрывает прелоудер грузится но не убирается »

Статистика спама

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