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

小提琴 1 小提琴2