css - 子divの高さを親の高さに設定します-兄弟の高さ

Question

親div内に2つの子divがあります。Child1はヘッダーで、Child2は本文です。子2の高さを親-子1の高さに設定したい。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 の例。