根据兄弟的高度设置div的高度

Question

我有像这样的HTML元素。

<div id="A">
    <div id="B"></div>
    <div id="C"></div>
</div>

“B”和“C”都有子元素。对于“B”，其高度是动态的，基于其内容。 现在，我想将“C”的高度设置为“A”的高度减去“B”的高度。有人知道如何通过CSS做到这一点吗？

Answer 1

您可以使用css tables。

它的工作原理如下：

第一个表行占用了所需的空间。

然后给第二行增加100％的高度，它会填满表格的剩余高度。

标记

<div class="a">
     <div class="b" >
         something
     </div>
     <div class="c" >
         something else
    </div>
</div>

（相关）CSS

.a
{
    display:table;
    height: 100px;
    width: 100px;
}
.b
{
    width: 100px;
    display:table-row;

}
.c
{
    display:table-row;
    height:100%;
    width: 100px;
}

FIDDLE1 FIDDLE2