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

StackOverflow https://stackoverflow.com/questions/803688

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть несколько тегов 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 становятся шире, то (C) их текстовое содержание заканчивается меньше раз, а затем (D) мои DOV слишком высоки.

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

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

Это было полезно?

Решение

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

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);
    });
}

Другие советы

Для остальных, кто, как и я, пришел сюда в поисках решения в 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);

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

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

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);

Я нашел это решение немного более аккуратным для моей ситуации.Это работает независимо от того, какой 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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top