Chiều cao jQuery() không thay đổi kích thước

Question

Tôi chưa bao giờ gặp vấn đề này trước đây nhưng tôi dường như không thể tìm ra giải pháp, vì vậy tôi hy vọng các bạn có thể giúp tôi.

jQuery

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 
     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Về cơ bản những gì chức năng này thực hiện là kiểm tra các div cao nhất và thiết lập chiều cao của tất cả các nhân div chọn với chiều cao này. Điều này hoạt động tốt. NHƯNG nó là một thiết kế đáp ứng vì vậy khi người dùng thay đổi kích thước của trình duyệt của mình nội dung được nhỏ hơn và div cao hơn. Vì vậy, tôi đã thêm một sự kiện thay đổi kích thước. Sự kiện này đang bị sa thải nhưng nó không thay đổi chiều cao. Bất kỳ ý tưởng là lý do tại sao thay đổi kích thước không thay đổi chiều cao?

nhanh jsFiddle để hiển thị những gì sẽ xảy ra: http://jsfiddle.net/3mVkn/

FIX

Hmm đây chỉ là đồng bằng ngu ngốc. Bởi vì tôi đã thiết lập chiều cao() nó đã được cố định nên tất cả những gì tôi phải làm là chỉ cần thiết lập lại chiều cao và nó hoạt động.

đang Cập nhật:

function setTheHeight() { 

    if($('#main.level1 .block.attention .block-content').length) { 

     //Reset height 
     $('#main.level1 .block.attention .block-content').height('auto'); 

     //Get value of highest element 
     var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
      function() { 
       return $(this).height(); 
      } 
     )); 
     console.log(maxHeight); 
     $('#main.level1 .block.attention .block-content').height(maxHeight); 
    } 
} 

setTheHeight(); 

$(window).resize(function() { 
    setTheHeight(); 
}); 

Answer 1

Đây không phải là jQuery liên quan nhưng CSS. Đó là bởi vì khi bạn đã đặt chiều cao của nội dung .block thành một số giá trị, sau khi bạn thay đổi kích thước cửa sổ, chiều cao của những nội dung đó sẽ không thay đổi vì chiều cao không còn được đặt thành auto nhưng với một số giá trị được xác định trước.

Giải pháp là sử dụng return $(this)[0].scrollHeight thay vì return $(this).height() Bằng cách này, nó sẽ trả về chiều cao thực của nội dung chứ không phải chiều cao được xác định CSS.

EDIT:

Các giải pháp thực sự để tính toán chiều cao của tất cả trẻ em bên trong .block-nội dung và sau đó trở về giá trị đó. Tôi đã chỉnh sửa mã của bạn tại đây http://jsfiddle.net/3mVkn/12/

Điều này sẽ cho bạn kết quả cần thiết.

Answer 2

Tôi nghĩ rằng bạn đang thiếu một tham số của .map() chức năng. Tôi đã xem .map()here.