Làm cách nào để giữ nhiều DIV cùng chiều cao bằng jQuery?

Question

Tôi có một vài thẻ DIV với số lượng nội dung văn bản khác nhau.

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> 

Họ đang ở trong một hai-by-hai bố trí và chiều rộng của họ là chất lỏng:

CSS:

div#boxes { 
    width: 100%; 
} 

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

Tôi muốn tất cả chúng cùng một chiều cao .

Vì vậy, tôi lặp qua chúng và tìm chiều cao của hình ảnh cao nhất. Sau đó, tôi lặp lại một lần nữa và đặt tất cả chúng đến độ cao đó.

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

này hoạt động tốt nếu chiều cao của div không cần phải thay đổi một lần nữa.

Nhưng, nó không thành công nếu tôi thay đổi kích thước cửa sổ trình duyệt:

1. Nếu I (a) làm cho trình duyệt rộng hơn, sau đó (b) DIV tôi có được rộng lớn hơn, sau đó (c) văn bản của họ nội dung kết thúc tốt hơn ít lần hơn, và sau đó (d) các DIV của tôi quá cao.

2. Nếu I (b) làm cho trình duyệt hẹp hơn, sau đó (b) DIV tôi có được hẹp hơn, sau đó (c) nội dung văn bản của họ kết thúc tốt đẹp hơn, và sau đó (d) DIV của tôi là quá ngắn.

Làm cách nào để cả hai (1) kích thước tự động DIV với chiều cao của nội dung như bình thường, nhưng cũng (2) giữ nhiều DIV đó có cùng chiều cao?

Answer 1

Cập nhật ... hoàn toàn viết lại câu trả lời này sau khi thử nghiệm và tìm ra một cách rõ ràng hoàn toàn khả thi để làm điều này:

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

Một điều tôi nhận thấy là IE thực sự có khó khăn làm tròn với 50% rộng nổi divs ... kết xuất tốt hơn nhiều nếu tôi thay đổi thành 49%.

jQuery này hoạt động ...

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

Kiểm tra số jQuery Plugin này cho phép bạn theo dõi thuộc tính CSS chẳng hạn như chiều cao.

Answer 3

Đối với những người khác, như tôi, đến đây bằng cách tìm kiếm Google cho một giải pháp: Phần nắm đấm của câu trả lời chấp nhận chỉ có tác dụng khi div đầu tiên là cao nhất . Tôi đã thực hiện một số thay đổi với nó và bây giờ nó dường như làm việc trong mọi trường hợp.

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

Nếu bạn muốn nó làm việc khi thay đổi kích thước vv ... Do nó như thế này:

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

tôi tìm thấy giải pháp này là gọn gàng hơn một chút cho hoàn cảnh của tôi.Nó hoạt động bất kể div nào là cao nhất. Dựa trên Chris Coyier cũ 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'); 

Tuy nhiên, tôi đã cần đặt chiều cao để tự động thay đổi kích thước trước khi chạy lại hàm. Tôi không cần phải thiết lập nó trong chức năng ban đầu bởi vì nó đã được thiết lập trong css.