하위 div의 높이를 부모 높이로 설정 - 형제 높이 height

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.