css - 将子 div 的高度设置为父母身高 - 兄弟姐妹身高

Question

我在父 div 中有 2 个子 div。Child1 是标题，Child2 是正文。我希望将 Child 2 的高度设置为 Parent - Child1 的高度。Child2 有内容，所以它应该是可滚动的

我知道我可以通过 JS 设置 Child2 的高度，但是可以通过 CSS 来做到这一点吗？

Answer 1

如果高度是固定的，您可以简单地给标题负值margin-bottom等于标题的高度，然后给内容分隔线padding-top也等于该高度：

HTML：

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS：

html, body { height:100%; margin:0; }
#wrapper {
    height:100%;
    background:#000;
}
#header {
    height:100px; /* Fixed height header */
    margin-bottom:-100px; /* Negative height of header */
    z-index:2;
    position:relative;
}
#content {
    min-height:100%;
    padding-top:100px; /* Height of header */
    box-sizing:border-box;
    z-index:1;
    position:relative;
}

JSFiddle 示例。