Как сохранить несколько DIV одинаковой высоты с помощью jQuery?

У меня есть несколько тегов DIV с разным объемом текстового содержимого.

HTML:

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

Они находятся в макете два на два, и их ширина изменчива:

CSS:

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

Я хочу, чтобы они были одинакового роста.

Итак, я перебираю их и нахожу высоту самого высокого. Затем я снова зацикливаюсь и устанавливаю их все на эту высоту.

jQuery:

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

Это хорошо работает, если высоту div не нужно снова менять.

Но это не удается, если я изменяю размер окна браузера:

  1. Если я (а) сделаю браузер шире, то (б) мои DIV станут шире, затем (в) их текст будет переноситься меньше раз, а затем (г) мои DIV станут слишком высокими.

  2. Если я (б) сделаю браузер более узким, то (б) мои DIV станут более узкими, затем (в) их текст будет больше переноситься, а затем (г) мои DIV станут слишком короткими.

Как мне (1) автоматически изменить размер DIV на высоту их содержимого, как обычно, но также (2) сохранить эти несколько DIV одинаковой высоты?


html layout jquery css
person Zack Peterson    schedule 29.04.2009    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Обновить... полностью переписав этот ответ после экспериментов и поиска другого, по-видимому, работоспособного способа сделать это:

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

Одна вещь, которую я заметил, это то, что IE действительно имеет проблемы с округлением с плавающими элементами div шириной 50% ... рендеринг был намного лучше, если я изменил их на 49%.

Этот jQuery работает...

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
    var currentWidth = $(window).width();
    if (previousWidth != currentWidth) {
        doAdjust = true;
    }
    previousWidth = currentWidth;
})

// every half second

$(function() {
    setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
    if (doAdjust) {
        adjustBoxHeights();
        doAdjust = false;
    }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        $(this).height('auto');
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
}
person RwwL    schedule 29.04.2009
comment
maxHeight всегда один и тот же при каждом выполнении AdjustBoxHeights(). Высота DIV никогда не может вернуться к своей естественной/автоматической высоте. - person Zack Peterson; 30.04.2009
comment
Как удалить стиль высоты из DIV с помощью jQuery? stackoverflow.com/questions/804161/ - person Zack Peterson; 30.04.2009
comment
$(selection).height('auto') работает в дополнение к $(selection).css('height', 'auto') в моем примере выше. - person RwwL; 30.04.2009
comment
Ни один из .height('auto'), .css('height', 'auto') или .attr('height','') у меня не работает. - person Zack Peterson; 30.04.2009
comment
Где/как именно вы пытаетесь его использовать? Где-то в вашей исходной функции? - person RwwL; 30.04.2009
comment
Только что проверено локально - использование .height('auto') прямо перед первым .each в исходном коде (в цепочке, сразу после селектора и перед .each) работает нормально. Вы должны установить их в автоматический режим, прежде чем начнете измерять их и манипулировать ими; возможно, это проблема, с которой вы столкнулись. Я использую jQuery 1.3.2 для этих тестов; Кстати. Не уверен, насколько функция высоты изменилась за последние несколько обновлений, если вообще изменилась. - person RwwL; 30.04.2009
comment
Кажется, что изменение размера DIV приводит к изменению размера окна, что приводит к изменению размера DIV, что вызывает... и т.д. - person Zack Peterson; 30.04.2009
comment
Я заставил его работать. Я добавил свой окончательный код к вашему ответу. Спасибо за помощь. - person Zack Peterson; 30.04.2009

arrow_upward
5
arrow_downward

Для других, кто, как и я, пришел сюда, выполнив поиск решения в Google: первая часть принятого ответа работает только тогда, когда первый div является самым высоким. Я внес в него некоторые изменения, и теперь он работает во всех случаях.

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);
person Jarco    schedule 11.07.2012

arrow_upward
2
arrow_downward

Ознакомьтесь с этим плагином jQuery, который позволяет отслеживать свойство CSS, такое как как высота.

person pjesi    schedule 29.04.2009
comment
Если вы обнаружите, что ответ неверен, и вы проголосовали за него, пожалуйста, по крайней мере, укажите причину. - person pjesi; 30.04.2009

arrow_upward
0
arrow_downward

Если вы хотите, чтобы он работал при изменении размера и т. д. Сделайте это так:

function sortNumber(a,b) {
    return a - b;
}

var highest = 0;

function maxHeight() {
    var heights = new Array();
    $('.equalheight div').css('height', 'auto');
    $('.equalheight div').each(function(){
        heights.push($(this).height());
    });        
    heights = heights.sort(sortNumber).reverse();
    highest = heights[0]; 
    $('.equalheight div').css('height', highest);
}

$(document).ready(maxHeight);
$(window).resize(maxHeight);
person Bram    schedule 14.10.2013

arrow_upward
0
arrow_downward

Я нашел это решение немного более аккуратным для моей ситуации. Он работает независимо от того, какой div является самым высоким. На основе этого старого сообщения Криса Койера на CSS Tricks .

function maxHeight() {
    var maxHeight = 0;
    $(".container > .post-box").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(".container > .post-box").height(maxHeight);
}

$(document).ready(function() {
    maxHeight();
}

$(window).bind('resize', function () {
    $(".container > .post-box").css('height', 'auto');
    maxHeight();
}).trigger('resize');

Однако мне нужно было установить автоматическую настройку высоты при изменении размера, прежде чем снова запускать функцию. Мне не нужно было устанавливать его в исходной функции, потому что он был установлен в css.

person J May    schedule 23.02.2016