Question

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

这可以不用任何Javascript吗？

在此示例中：http://jsfiddle.net/5J8Em/2/我希望红色<div>与蓝色{{1}}一样高。

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演示

<div>占据父</div>的所有高度

1 个答案: