CSS：我怎么能长出左侧浮动的div到100％

Question

这里是什么，我想完成

http://jsfiddle.net/fA2v8/

<div style="width:700px;border: thin solid black"> 
<div style="float:left;"> 
    <div style="border: thin solid green;width:400px;height:50px"></div> 
    <div style="border: thin solid green;width:400px;height:50px"></div> 
    <div style="border: thin solid green;width:400px;height:50px"></div> 
</div> 
<div style="float:left;"> 
    <div style="border: thin solid red;width:250px;height:100% "></div> 
</div> 
<div style="clear: both;"></div> 
</div> 

红色div的高度应扩大jfiddle。

我想有一个扩大到其父母的高度的100％的股利。因为在运行时不会知道大小。

我在做什么错？

Answer 1

我认为，如果你希望你的红格扩展到父DIV的100％，父DIV必须具有“高度”载：

<div style="float:left; height:120px;"> 
<div style="border: thin solid red;width:250px;height:100% "></div> 
</div> 

类似的东西...

Answer 2

好吧，我把它与一些花哨的CSS一起工作。 http://jsfiddle.net/fA2v8/7/

div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
.container { 
    position: relative; 
} 
.left { 
    width: 400px; 
    float: left; 
    border: solid thin blue; 
} 
.right-wrapper { 
    width: 20px; 
    float: left; 
} 
.right { 
    height: 100%; 
    position: absolute; 
    border: solid thin red; 
} 
.clear { 
    clear: both; 
    height: 0; 
} 
<div class="container"> 
    <div class="left"> 
     <div style="border: thin solid green;width:400px;height:50px"></div> 
     <div style="border: thin solid green;width:400px;height:50px"></div> 
     <div style="border: thin solid green;width:400px;height:50px"></div> 
    </div> 
    <div class="right-wrapper"> 
    <div class="right">test2</div> 
    </div> 
    <div class="clear">&nbsp;</div> 
</div> 

Answer 3

如果您愿意，也可以使用jQuery。 - FIDDLE。

JS

$('.rightdiv').css('height', $('.bigdiv').innerHeight());