Twitter Bootstrap Legacy: Uniform Höhe auf Spannweiten

Question

Siehe folgendes Bild:

Was ich brauche, ist die B-Säule zum Vergrößern auf die erste Spalte Höhe übereinstimmen, oder wenn ich mehrere Spalten hatten sie behauptet immer die gleiche Höhe, Anpassung an die größte Säulenhöhe.

Ich habe eine Weile ohne Erfolg mit <div class="clearfix"></div> und height: 100% gespielt.

Ich benutze 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; 
     } 

Aus irgendeinem Grund die Geige tun ähnelt das Bild nicht mit dem obigen Code, aber wenn man es in eine test.html einfügen es funktioniert richtig.

EDIT:

Und wie kann ich die Höhe der inneren span div s ausrichten?

EDIT 2:

Mit @Coop Führung gelang es mir endlich diese aussortiert zu haben. Ich komme zu dem folgenden Code:

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

Um dies mit einer jQuery-Lösung zu tun, fügen Sie zuerst die Klassehinzuzu allen divs in einer Reihe, die Sie die gleiche Höhe geben möchten. Dann fügen Sie die jQuery unter:

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

Siehe Geige hier: http://jsfiddle.net/VA6D4/

Beachten Sie, dass die jQuery in einer $(window).load sein muss, weil Google Chrome gibt 0 Höhe und Breite, um Bilder, bevor sie geladen werden.

Answer 2

Sehen Sie dieses Fiddle Sie es durch Zugabe von großer Polsterung mit großem negativem Marge tun kann, und dann wickeln Sie Ihre Spannweite mit overflow: hidden;

CSS

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