Wie kann ich mehr DIVs die gleiche Höhe mit jQuery halten?

Question

Ich habe ein paar DIV-Tags mit unterschiedlichen Mengen an Textinhalt bekommt.

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>

Sie sind in einem Zwei-mal-zwei-Layout und ihre Breite ist fließend:

CSS:

div#boxes {
    width: 100%;
}

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

Ich möchte, dass sie alle die gleiche Höhe.

Also, ich Schleife durch sie und die Höhe des höchsten finden. Dann habe ich Schleife wieder und stellen Sie sie alle zu dieser Höhe.

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

Das funktioniert gut, wenn die Höhe des div nicht wieder geändert werden muss.

Aber, es schlägt fehl, wenn ich die Browser-Fenster Größe ändern:

1. Wenn ich (a) machen den Browser weiter, dann (b) meine DIVs sich verbreitern, dann (c) ihren Text Inhalt wickelt weniger oft, und dann (d) meine DIVs sind zu groß.

2. Wenn ich (b) machen den Browser schmaler, dann (b) meine DIVs bekommen enger, dann (c) deren Textinhalt wickelt mehr und dann (d) sind meine DIVs zu kurz.

Wie kann ich beide (1) automatisch Größe DIVs auf die Höhe ihres Inhalts wie normal, aber auch (2) halten die mehr DIVs die gleiche Höhe?

Answer 1

Aktualisieren ... vollständig diese Antwort Umschreiben nach Experimentieren und Suche nach einem anderen, scheinbar praktikable Weg, dies zu tun:

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

Eine Sache habe ich bemerkt, dass IE wirklich Runden Probleme mit 50% breit schwebte divs hat ... die Rendering viel besser war, wenn ich die auf 49% geändert.

Dieses jQuery funktioniert ...

// 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

Für die andere, das, wie ich, hier kam durch eine Google-Suche nach einer Lösung: Die Faust Teil der akzeptierten Antwort nur funktioniert, wenn der erste div am höchsten ist. Ich habe einige Änderungen vorgenommen und jetzt scheint es, alle Fälle zu arbeiten.

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

Sehen Sie sich diese jQuery Plugin die Ihnen erlaubt, ein zu überwachen CSS-Eigenschaft wie die Höhe.

Answer 4

Wenn Sie wollen, dass es funktioniert, wenn etc Ändern der Größe ... Machen Sie es wie folgt aus:

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

Ich fand diese Lösung etwas mehr ordentlich für meine Situation. Es funktioniert unabhängig davon, welche div am höchsten ist. Basierend auf diesem alten Chris Coyier Beitrag bei 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');

Allerdings habe ich brauche die Höhe auf Auto auf Resize zu setzen, bevor die Funktion erneut ausgeführt wird. Ich brauche es nicht in der ursprünglichen Funktion zu setzen, weil es in der CSS gesetzt wurde.