Данная заметка содержит несложный 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 -->
Очень полезная статья, все сделал как нужно по ней, и этой действительно оказался единственный способ выровнять DIV. Но появляется странная проблема: при первоначальной загрузке страницы всё отлично, но стоит страницу обновить, как меньший див, ну тот который увеличивался до большего опять становится меньше где-то на треть. Ума не приложу что это за фигня. Очень жду помощи!)
На исходном примере все работает. Откройте отладчик в Chrome (клавиша F12) и смотрите, что там происходит.