根据兄弟的高度设置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