요소가 컨테이너의 나머지 세로 공간을 채우게하는 적절한 방법은 무엇입니까?

Question

임의의 요소를 보유 할 높이를 가진 div와 나머지 공간을 채우기를 원하는 div가 있으므로 div가 채우는. jsfiddle

HTML :

<div class=container> 
    <div class=title> 
     <h1> title </h1> 
    </div> 
    <div class=body> 
     <h1> stuff here </h1>  
    </div> 
</div>​ 

CSS :

.container { 
    border: 1px red solid; 
    height: 300px; 
} 
.title { 
    background: blue;  
} 
.body { 
    background: green; 
} 

내가 그것을 this처럼하지만, 명시 적으로 높이를 설정하지 않고 보이도록 녹색 사업부는 빨간색 테두리 내에서 공백을 채우려 왜냐하면 제목과 포함 div의 크기가 동적이기 때문입니다.

Answer 1

내가 할 일은 안에이라는 제목을 넣는 것입니다. 그런 다음 본체 높이를 100 %로 설정할 수 있습니다 (컨테이너의 높이가 고정되어 있기 때문에). 제목은 자체 배경과 함께 필요한 것을 채울 것입니다. 관련 요소를 하나의 컨테이너에 결합하면 배치에서 물건을 이동하는 것이 훨씬 간단해질 수 있습니다.

HTML :

<div class=container> 
    <div class=body> 
     <div class=title> 
      <h1> title </h1> 
     </div> 
    <h1> stuff here </h1>  
    </div> 
</div>​ 

CSS :

.container { 
    border: 1px red solid; 
    height: 300px; 
} 
.title { 
    background: blue; 

} 
.body { 
    height:100%; 
    background: green; 
} 

당신은 항상 당신의 다중 선택을 포함하는 컨테이너 내부에 다른 요소를 추가하고, 부모 컨테이너의 속성을 상속 할 수 있습니다.