Jak zachować wiele DIV o tej samej wysokości za pomocą jQuery?

Question

Mam kilka tagów DIV z różnymi ilościami tekstu.

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> 

Są w układzie dwa na dwa, a ich szerokość jest płyn:

CSS:

div#boxes { 
    width: 100%; 
} 

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

Chcę je wszystkie na tej samej wysokości .

Przeszukuję ich i znajduję wysokość najwyższego. Potem znowu pętlę i ustawić wszystkie na taką wysokość.

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

Działa to dobrze, jeśli wysokość div nie trzeba ponownie zmieniać.

Ale to się nie powiedzie, jeśli rozmiar okna przeglądarki:

1. Gdybym (a) sprawi, że przeglądarka szersza, a następnie (b) moje DIV uzyskać szerszy, a następnie (c) ich tekst zawartość zawija się mniej razy, a następnie (d) moje DIV są zbyt wysokie.

2. Gdybym (b) sprawiają, że przeglądarka węższe, następnie (b) moje DIV się węższy, a następnie (c) ich treść tekst zawija więcej, a następnie (d) moi div są zbyt krótkie.

Jak ja (1) DIV automatycznie wielkości do wysokości ich treści jak normalne, ale także (2) zachować te wieloodcinkowe DIV tej samej wysokości?

Answer 1

Aktualizacja ... całkowicie przepisywanie tę odpowiedź po eksperymentowanie i znalezienie innego, pozornie realne sposób to zrobić:

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

Jedną rzeczą, jaką zauważyłem jest to, że IE naprawdę ma zaokrąglenie kłopoty z 50% szerokości płynął divs ... renderowanie było o wiele lepsze, gdy zmieniłem je na 49%.

Ten jQuery działa ...

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

Zapoznaj się z tym jQuery Plugin, który umożliwia monitorowanie właściwości CSS, takich jak wysokość.

Answer 3

Dla innych, którzy, jak ja, przybyli tu wyszukując w Google rozwiązania: Część pięść z przyjętym odpowiedź działa tylko wtedy, gdy pierwszy div jest najwyższa . Wprowadziłem w nim pewne zmiany i teraz wydaje się, że działa we wszystkich przypadkach.

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 4

Jeśli chcesz go do pracy podczas zmiany rozmiaru itp ... Czy to tak:

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

znalazłem to rozwiązanie się być nieco bardziej schludny dla mojej sytuacji.Działa niezależnie od tego, który div jest najwyższy. Opierając się na tym starym Chris Coyier post at 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'); 

Jednak musiałem ustawić wysokość na automatyczną zmianę rozmiaru przed ponownym uruchomieniem funkcji. Nie musiałem ustawiać go w oryginalnej funkcji, ponieważ był ustawiony w css.