동적 및 고정 div 높이

Question

3 개의 다른 div : 헤더, 내용 및 바닥 글을 포함하는 div를 만들려고합니다. 머리글과 바닥 글은 고정 된 div를 가지며 컨테이너 div의 위쪽과 아래쪽에 배치됩니다. 내용은 남아있는 사용 가능한 공간을 채워야하며 컨테이너 div의 크기가 조정될 때 오버플로 : 자동 및 최대 높이가 컨테이너의 남은 공간에 해당하여 동적으로 적용됩니다. 이 동작을 어떻게 수행 할 수 있습니까?

#container 
    #header 
    #body 
    #footer 

#container { 
    display: table; 
    height: 300px; 
    width: 300px; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
    width: 100%; 
    display: table-row; 
} 

#container #body { 
    background: #777; 
    display: table-row; 
    height: 100%; 
    max-height: 100%; 
    overflow: auto; 
    width: 100%; 
} 

#container #footer { 
    background: #888; 
    display: table-row; 
    height: 30px; 
    width: 100%; 
} 

여기에 제가 이미 있습니다. 여기서 문제는 #body가 max-height 매개 변수를 허용하지 않고 내용에 따라 크기를 조정한다는 것입니다. 데모 http://jsfiddle.net/deHvH/1/, jQuery UI 크기 조정 가능 http://jsfiddle.net/deHvH/2/

EDIT : flexbox 모델이 필요합니다.

Answer 1

플렉스 박스 모델이 필요했습니다!

#container { 
    display: table; 
    height: 300px; 
    width: 300px; 
    display: box; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
} 

#container #body { 
    background: #777; 
    box-flex: 1; 
    overflow: auto; 
} 

#container #footer { 
    background: #888; 
    height: 30px; 
} 

Answer 2

다음 CSS로 최대 높이를 적절하게 조정할 수 있습니다.

#container { 
    height: 300px; 
    width: 300px; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
    width: 100%; 
} 

#container #body { 
    background: #777; 
    max-height: 200px; 
    overflow: auto; 
} 

#container #footer { 
    background: #888; 
    height: 30px; 
    width: 100%; 
} 

이 문제가 해결 되었습니까?