html - 占据父母的所有高度

Question

我有两个并排的<div>块，它们都包含在一个更大的<div>块中。我希望两个子<div>块中较小的一个占据父块的所有剩余垂直空间，而实际上不知道父块的高度。

这可以在没有任何 Javascript 的情况下完成吗？

在这个例子中：http: //jsfiddle.net/5J8Em/2/我希望红色<div>和蓝色一样高。

Answer 1

尝试使用display:table;父元素和子元素display: table-cell;：

HTML：

<div id="a">
    <div id="b">
        hello world 
    </div>
    <div id="c">
        hello world hello world hello world 
        hello world hello world hello world 
    </div>
</div>​

CSS：

#a {
     background-color:rgb(100,100,100);      
     width:200px; 
     display:table;
}

#b {
     background-color:red; 
     vertical-align:top;
     display: table-cell;
}

#c {
     background-color:blue;   
     width:100px;
     word-wrap:break-word;   
     display: table-cell;    
}

这是jsFidde演示