Comment faire pour conserver plusieurs DIVs la même hauteur à l'aide de jQuery?

J'ai un peu de balises DIV avec différentes quantités de contenu de texte.

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 dans un deux-par-deux mise en page et leur largeur est fluide:

CSS:

div#boxes {
    width: 100%;
}

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

Je les veux toutes la même hauteur.

Donc, je boucle à travers eux et de trouver la hauteur de la plus haute un. Ensuite je boucle encore et de les mettre tous à la 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, il échoue si je redimensionner la fenêtre du navigateur:

  1. Si I (a) de rendre le navigateur plus large, puis (b) mon
    DIVs plus large, puis (c) leur texte
    le contenu des enveloppements de moins en moins de temps, et puis (d)
    mes DIVs sont trop hauts.

  2. Si j' (b) rendre le navigateur plus étroite,
    puis (b) mes DIVs rétrécissent, puis (c)
    leur contenu texte enveloppements plus, et
    puis (d) mes DIVs sont trop courtes.

Comment puis-je à la fois (1) automatiquement à la taille de DIVs à la hauteur de leur contenu, comme d'habitude, mais aussi (2) conserver ces multiples DIVs la même hauteur?

InformationsquelleAutor Zack Peterson | 2009-04-29
  1. 4

    Mise à jour... la réécriture complète de cette réponse à l'issue d'expérimenter et de trouver un autre, apparemment pratiques pour ce 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 remarqué, c'est que IE a vraiment l'arrondissement des problèmes avec 50% de largeur flottait divs... le rendu est beaucoup mieux si j'ai changé ceux de 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);
    });
}
    • maxHeight est toujours la même à chaque fois adjustBoxHeights() s'exécute. La DIV hauteurs ne sont jamais autorisés à revenir à leur naturel/automatique des hauteurs.
    • Comment puis-je supprimer la hauteur de style à partir d'un DIV à l'aide de jQuery? stackoverflow.com/questions/804161/...
    • $(sélection).hauteur('auto') semble fonctionner en plus de l' $(sélection).css('height', 'auto') dans mon exemple ci-dessus.
    • Aucun de .hauteur('auto'), .css('height', 'auto'), ou de .attr('height',") travail pour moi.
    • Où/exactement comment êtes-vous essayer de l'utiliser? Quelque part dans votre fonction d'origine?
    • Juste vérifié localement -- à l'aide .hauteur('auto') juste avant la première .chaque dans votre code original (enchaînés, à droite après le sélecteur de et avant de la .chaque) semble fonctionner très bien. Vous devez les configurer en automatique avant de commencer à mesurer et de les manipuler; c'est peut-être le problème que vous rencontrez. J'utilise jQuery 1.3.2 pour ces tests, btw. Pas sûr de savoir comment beaucoup de la fonction de hauteur a changé au cours des dernières mises à jour peu, voire pas du tout.
    • Il semble que le redimensionnement des DIVs causes de la fenêtre de redimensionnement qui provoque des DIVs pour redimensionner ce qui provoque... etc.
    • Je l'ai eu à travailler. J'ai ajouté mon code final pour votre réponse. Je vous remercie pour votre aide.

    InformationsquelleAutor RwwL
  2. 5

    Pour les autres qui, comme moi, sont venus ici en cherchant sur Google une solution: La première partie de la accepté de répondre ne fonctionne que lorsque le premier div est le plus élevé. J'ai fait quelques modifications, et maintenant il 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);
    InformationsquelleAutor Jarco
  3. 2

    Découvrez ce Plugin jQuery qui vous permet de surveiller une propriété CSS comme la hauteur.

    • Si vous trouvez une réponse incorrecte et vous rejeter, merci de donner au moins une raison.
    InformationsquelleAutor pjesi
  4. 0

    Si vous le souhaitez lors du redimensionnement, etc... de Faire comme ceci:

    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);
    InformationsquelleAutor Bram
  5. 0

    J'ai trouvé cette solution pour être un peu plus coquette pour ma situation. Il fonctionne indépendamment de la div est le plus élevé. En se basant sur ce vieux Chris Coyier poste à CSS Astuces.

    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, je n'ai besoin de régler la hauteur de l'auto sur les redimensionner avant d'exécuter à nouveau la fonction. Je n'ai pas besoin de le mettre dans la fonction d'origine parce qu'elle a été définie dans le css.

    InformationsquelleAutor J May