Comment garder plusieurs DIV à la même hauteur en utilisant jQuery?

Question

J'ai quelques balises DIV avec différentes quantités de contenu textuel.

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>

Ils sont disposés deux par deux et leur largeur est fluide:

CSS:

div#boxes {
    width: 100%;
}

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

Je les veux tous de la même hauteur.

Alors, je les parcoure en boucle et trouve la hauteur du plus grand. Puis je boucle à nouveau et mets tous à cette hauteur.

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

Cela fonctionne bien si la hauteur de la div n'a pas besoin de changer à nouveau.

Mais cela échouera si je redimensionne la fenêtre du navigateur:

1. Si je (a) élargis le navigateur, alors (b) mon Les DIV deviennent plus larges, puis (c) leur texte le contenu enveloppe moins de fois, puis (d) mes DIV sont trop grandes.

2. Si je (b) rend le navigateur plus étroit, alors (b) mes DIV deviennent plus étroites, puis (c) leur contenu de texte enveloppe plus, et alors (d) mes DIV sont trop courtes.

Comment puis-je (1) dimensionner automatiquement les DIV à la hauteur de leur contenu comme d'habitude, mais aussi (2) garder ces multiples DIV à la même hauteur?

Answer 1

Mettre à jour ... réécrivez complètement cette réponse après avoir expérimenté et trouvé un autre moyen apparemment pratique de le faire:

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

Une chose que j’ai constatée, c’est que IE avait vraiment des problèmes d’arrondi avec des divs à 50% de largeur, le rendu était bien meilleur si je les changeais à 49%.

Cette jQuery fonctionne ...

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

Answer 2

Pour les autres qui, comme moi, sont venus ici en cherchant une solution sur Google: la première partie de la réponse acceptée ne fonctionne que lorsque la première div est la plus haute. J'ai apporté quelques modifications et cela semble fonctionner dans tous les cas.

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

Answer 3

Découvrez ce plugin jQuery qui vous permet de surveiller Propriété CSS telle que la hauteur.

Answer 4

Si vous voulez que cela fonctionne lors du redimensionnement, etc., procédez comme suit:

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

Answer 5

J'ai trouvé cette solution un peu plus soignée dans mon cas. Cela fonctionne quel que soit le div le plus élevé. Basé sur ce vieux Chris Coyier posté à 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');

Cependant, j'avais besoin de définir la hauteur sur redimensionnement automatique avant d'exécuter à nouveau la fonction. Je n'avais pas besoin de le définir dans la fonction d'origine car il était défini dans le css.