오버플로 - y div를 수직 사용 가능한 공간으로 확장하는 방법은 무엇입니까?

Question

나는 이와 같은 레이아웃이 있습니다

<div id="container"> 
    <div id="A"></div> 
    <div id="B"></div> 
    <div id="C"></div> 
</div> 

을 여기에 (불완전한) CSS는 다음과 같습니다

#container { 
    height: 400px; 
    background: red;  
} 

#A { 
    height: 50px; 
    background: yellow; 
} 

#B { 
    height: 300px; 
    background: blue; 
    overflow-y: auto;  
} 

#C { 
    height: 50px; 
    background: yellow; 
} 

그래서 AB와 C는 서로 위에 쌓인되어야하고, B는를 작성해야 A와 C 사이에 남아있는 공간으로 내용이 너무 많으면 스크롤 바를 보여줍니다.
내 문제는 때로는 C 이 누락 될 수 있다는 것입니다.이 B의 공간을 동적으로 확장하도록하려면 어떻게해야합니까?

Answer 1

한 가지 가능한 방법은 다음과 같습니다 그래서

#B:last-child { 
    height: 350px; 
}​ 

http://jsfiddle.net/thirtydot/7Bqkb/1/

, #B 수동으로 올바른 값으로 높이를 설정, 마지막 아이 인 경우는.

:last-child browser support.

Answer 2

또 다른 방법은 ~ 선택 사용 :

#B { 
    height: 350px; 
    background: blue; 
    overflow-y: auto;  
} 
#C~#B { 
    height: 300px; 
} 

http://jsfiddle.net/VtWAY/2

가 IE7이 있으시면 + 지원을 http://reference.sitepoint.com/css/generalsiblingselector

편집 : 당신은 또한에 B와 C를 교환하는 경우에만 작동합니다 html. http://jsfiddle.net/VtWAY/4/