divの高さを「メイン」コンテナの100％のままにするにはどうすればよいですか？

Question

<div id="main"> 
    <div id="left"> 
     news feed goes here 
    </div> 
    <div id="right"> 
     another news feed ges here 
    </div> 
    <div style="clear:both;"></div> 
</div> 

私はコンテナ "main"を持っていて、私は2つの列を持っているとします。どちらの列もfloat:left;です。

左のニュースフィードの列で「もっと読み込み」をクリックすると、もちろん、より多くのコンテンツが読み込まれるため、その列の高さが拡大されます。しかし、私はの右の列も一緒に展開したいと思っています。言い換えれば、私は "右"の列を常にメインの100％の高さにしたい。

どうすればいいですか？ 「正しい」列の高さを100％としますか？または何？

Answer 1

重複したりしない...ここにあなたがこの

http://jsfiddle.net/pixelass/uAur5/

HTMLを行う可能性がどのようにアイデアを与えるためにフィドルだ

<span class="more">load more</span> 
<div class="main"> 
    <div class="left">this is a left box</div> 
    <div class="full">this is the right box</div> 

</div> 

CSS

.left { 
    background:#666; 
    margin:10px; 
    width:130px; 
    height:80px; 
    float:left; 
    padding:10px; 
} 
.full { 
    width:130px; 
    background:#eee; 
    float:right; 
    height:80px; 
    padding:10px; 
    margin:10px; 
} 
.main { 
    width:500px; 
    background:#000; 
    height:140px; 
    margin:20px 10px; 
} 
.more{ 
border:#000 1px solid; 
    padding:3px; 
    background:#222; 
    color:#aaa; 
    margin:20px; 
    cursor:pointer; 
} 

jクエリ

$('.more').click(function(){ 
    $('.main').append('<div class="left">this is a left box</div>'); 
    $('.full').css('height', '+=120px'); 
    $('.main').css('height', '+=120px'); 
}); 

Answer 2

divの高さを変更したい場合は、

 
document.getElementById("yourRightDivsId").style.height = yourNewHeight;