Twitterのブートストラップレガシー：スパン

Question

上に均一な高さ以下の画像を参照してください：

私は、最初の列の高さに合わせて、B列を拡大することで、または私はいくつかの列を持っていた場合、彼らは常に維持して必要なもの同じ高さ、最大の列の高さに調整します。

私はしばらくの間、<div class="clearfix"></div>とheight: 100%で成功しなかった。

私は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; 
     } 

フィドルは、上記のコードで画像を似ていないいくつかの理由がありますが、test.htmlに貼り付けた場合それは適切に動作します。

EDIT：

そして、どのように私は、内側span div Sの高さを揃えることができますか？

EDIT 2：

@Coopガイダンスでは、私は最終的に、これは整理持つことができました。私は、次のコードに来る：

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

であなたのスパンをラップすることができます参照してください。 jQueryソリューションでこれを行うには

最初にクラスを追加します同じ高さを与えたい行のすべてのdivにを割り当てます。 はその後、以下のjQueryを追加します。彼らはロードする前に、Google Chromeは、画像に0高さと幅を与えるので、jQueryの$(window).loadにあることが必要であることをhttp://jsfiddle.net/VA6D4/

注：

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

をここにフィドルを参照してください。

Answer 2

このFiddleあなたは大きな負のマージンで大きなパディングを追加することによって、それを行うと、その後overflow: hidden;

CSS

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