動的な高さが同じ高さの2つのdivs

Question

タイトルによれば、同じように2つのdivが必要です。彼らはコンテンツが収まるために必要なほど高くなければなりません。

.portfolioleft{ 
    float:left; 
    width:189px; 
    background-color: #436FAC; 
    min-height: 100px; 
    height: auto; 
    color: #FFF; 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 10px; 
} 
.portfolioleft img{ 
    border-radius: 10px; 
} 
.portfolioright{ 
    float:right; 
    width:500px; 
    background-color: #436FAC; 
    min-height: 100px; 
    height: auto; 
    color: #FFF; 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 10px; 
} 
.portfolioright a{ 
    color:#FFFFFF; 
} 

とdivのためのHTMLは次のとおりです：現在のCSSがある

<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div> 
<div class="portfolioright"> 
<h2>Title</h2> 
<p>Text</p> 
</div> 
<div class="clear">&nbsp;</div> 

Answer 1

CSSだけではこの偉業に取り組むことはできません（イメージを使用できるハッキングソリューションが必要な場合を除きます）。 JSソリューションを実装する必要があります。内容は動的で列の高さがわからないため、DOMにアクセスして最も高い列の高さを判断し、指定された列に適用する必要があります。私は以下のものを定期的に使用しています。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

Answer 2

残念ながら、これはCSSでトリッキーな問題です。左側のサイドバーの背景色をセクションの下端まで伸ばしたい場合（右側のdivで定義された高さで）、親div（右divの高さに尺度）内にラップしてから、絶対とそうのような100％の高さ：位置で左のdivを配置

<div class="portfolio"> 
    <div class="portfolioleft">...</div> 
    <div class="portfolioright">...</div> 
</div> 

.portfolio { 
    position: relative; 
    background: white; 
} 

.portfolio .portfolioleft { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 200px; 
    height: 100%; 
    background: #436FAC; 
} 

.portfolio .portfolioright { 
    margin-left: 200px; 
} 

両側が動的であり、両方の高さが一致する必要がある場合は、それはすべての主要なブラウザ間で動作する唯一確実な方法はにあります2つの列を持つテーブルベースのレイアウトに惑わされています。

Answer 3

あなたの左、右のdiv内のセルのプロパティが

私はあなたのコードをチェックし、表示テーブルセルに

をフロートを交換しますが、このライブhttp://jsfiddle.net/rohitazad/prMLh/1/