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

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

1 个答案: