Twitter Bootstrap Legacy: Uniform wysokość o rozpiętości

Question

Zobacz następujący obraz:

Co potrzebne jest, aby powiększyć kolumnie B, aby dopasować pierwszą wysokość kolumny, albo gdybym miał kilka kolumn zawsze utrzymuje tej samej wysokości, dostosowując się do największej wysokości kolumny.

Grałem przez chwilę bez żadnego sukcesu z <div class="clearfix"></div> i height: 100%.

Używam 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; 
     } 

Z jakiegoś powodu skrzypce nie przypomina obraz z powyższym kodem, ale jeśli wkleić go do test.html działa poprawnie.

EDIT:

i jak mogę wyrównać wysokość wewnętrznej span div s?

EDIT 2:

Z kierunkiem @Coop I wreszcie udało się to załatwić. I doszli do następującego kodu:

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

aby to zrobić za pomocą roztworu jQuery:

najpierw dodać klasę eHeight dla wszystkich elementów div z rzędu, które chcesz nadać tej samej wysokości. Następnie dodać jQuery poniżej:

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

widoczny na skrzypce tutaj: http://jsfiddle.net/VA6D4/

Należy pamiętać, że jQuery musi być w $(window).load ponieważ Google Chrome daje 0 wysokość i szerokość do zdjęć przed ich ładować.

Answer 2

Zobacz ten Fiddle Można to zrobić dodając duży wyściółkę z dużym marginesem ujemnym, a następnie owinąć przęsło z overflow: hidden;

CSS

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