2列の等高さ - TwitterのBootstrap 2.0

Question

まあ、TwitterのBootstrapは素晴らしいツールであり、私のようなCSSについてはあまり知らない人にとっては、たくさんのことが楽になることは誰もが分かっています。しかし、時には問題になることもあります。

問題は次のとおりです。2列の固定幅の940ピクセル幅、12列のグリッド中心レイアウトを使用していますが、両方の列の高さが同じであることが必要でした。コードは今、このようなものです：あなたが見ることができるように

<div class="container"> 
    <div class="content"> 
     <div class="row"> 
      <div class="span8 div-content"> 
       <div class="center95"> 
        <div id="notWrap"> 
         <div id="not"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="span4 div-sidebar"> 
       <div class="center90"> 
        <div id="myPWrap"> 
         <div id="myP"> 
         </div> 
        </div> 
        <hr /> 
        <div id="otherPWrap"> 
         <div id="otherP"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer id="bottom" class="footer"> 
     <p>&copy;</p> 
    </footer> 
</div> 

は、「MYP」、「otherP」と「ない」のように、コンテンツのないのdivがあります。それらはJavascriptで満たされており、その中に格納されているコンテンツの量は変わる可能性があります。そのため、多くの場合、列（「列」は「div-content」クラスのdivとdiv "div-sidebar"クラスの場合）は、他のものよりも大きくなります（私の場合、両方の列が "より大きい"かもしれません）。

を基本的には、左の列（コードで<div class="span8 div-content">）が同じ右列（コードで<div class="span4 div-sidebar">）の大きさ、および副する必要があります：それは場合に役立ちます。ここ

は、絵ですその逆。また、黄色の部分は<div class="content">、白い背景は<div class="container">です。 <div class="row">は、2つの列の単なるコンテナであり、色はありません。

「高さが同じ列」の問題は、Webプログラマにとっては繰り返し発生する問題ですが、私がこれまでに試したソリューションはうまくいきませんでした。 「Faux Columnソリューション」が気に入らないのは、私がCSSの初心者であるため、このような回避策に訴えたくないからです。可能であれば、私はむしろ純粋なCSSに固執したいと思います。

事前にお寄せいただきありがとうございます。

Answer 1

いつも私のために働いているものがある：

#myPWrap,#otherPWrap { 
    overflow:hidden; 
} 

#myP,#otherP { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

また、テーブルCOLにテーブルと#myPにラップを有効にしようとすることができます。

#myPWrap,#otherPWrap { 
display: table; 
} 

#myP,#otherP { 
display: table-cell; 
} 

Answer 2

私は、カスタムjQueryの最大のプラグインでこれを解決：

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

をここでコンテンツボックスは私の内部列要素であり、コンテンツ・コンテナは列が含まれているラッパーである：

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

これが役に立ちます。