css - 将子 div 的高度设置为 parent 高度 - sibling 高度

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 example .