Twitter Bootstrap Legacy: chiều cao thống nhất về nhịp

Question

Xem hình ảnh sau:

Những gì tôi cần là để mở rộng cột B để phù hợp với chiều cao cột đầu tiên, hoặc nếu tôi có nhiều cột họ luôn duy trì cùng chiều cao, điều chỉnh chiều cao cột lớn nhất.

Tôi đã chơi một thời gian mà không thành công với <div class="clearfix"></div> và height: 100%.

Tôi đang sử dụng Twitter Bootstrap 2.3.2.

HTML:

<div id="main" class="row-fluid"> 
     <div class="span6"> 
      <div> 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBB 
      </div> 
     </div> 
     <div class="span6"> 
      <div> 
       B 
      </div> 
     </div> 
    </div> 

CSS:

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css"); 

     #main { 
      height: 5em; 
     } 
     .span6 { 
      background-color: lightgray; 
      border: 1px solid red; 
     } 

     .span6 > div { 
      background-color: lightblue; 
      border: 1px solid green; 
     } 

Đối với một số lý do fiddle không giống với hình ảnh với đoạn code trên, nhưng nếu bạn dán nó vào một test.html nó hoạt động đúng.

EDIT:

Và làm thế nào tôi có thể sắp xếp chiều cao của khu vực nội span div s?

EDIT 2:

Với sự hướng dẫn @Coop Cuối cùng tôi quản lý để có điều này được sắp xếp ra ngoài. Tôi đến với đoạn mã sau:

var content_height = []; 

jQuery('.row-fluid > div') 
    .each(function() { 
     content_height.push(jQuery(this).css({minHeight: 0}).height()); 
    }) 
    .each(function() { 
     jQuery(this).css({ 

     minHeight: Math.max.apply(Math, content_height) 
     }); 
    }); 

Answer 1

Để thực hiện việc này bằng giải pháp jQuery:

Đầu tiên hãy thêm lớp eHeight cho tất cả các div trong một hàng bạn muốn cung cấp cho cùng một chiều cao. Sau đó, thêm jQuery dưới đây:

$('.eHeight').each(function() { 
    var eHeight = $(this).parent().innerHeight(); 
    $(this).outerHeight(eHeight); 
}); 

Xem fiddle đây: http://jsfiddle.net/VA6D4/

Lưu ý rằng jQuery cần phải được trong một $(window).load vì Google Chrome cho 0 chiều cao và chiều rộng hình ảnh trước khi tải.

Answer 2

Xem này Fiddle Bạn có thể làm điều đó bằng cách thêm đệm lớn với lợi nhuận tiêu cực lớn và sau đó quấn tuổi của bạn với overflow: hidden;

CSS

.sameheight { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:green; 
} 
.wrap { 
    overflow: hidden; 
}