두 요소간에 나머지 높이를 나누는 방법은 무엇입니까?

Question

이것은 아직 우아한 솔루션을 찾지 못한 경우가 꽤 흔한 문제입니다.

div에 몇 가지 블록 요소가 있습니다. 아주 간단한 세로 레이아웃.

첫 번째 두 요소는 고정 된 높이를 갖습니다. 나머지 두 요소는 나머지 공간 (즉, 몸체 높이 - 첫 번째 요소 높이 - 두 번째 요소 높이)을 나눠야합니다.

크기를 계산할 수 있다는 것을 알고 있지만이를 구현하는 우아한 방법이 있습니까?

저는 최신 브라우저 기능 (현대 Firefox/Chrome 버전에서만 실행되는 내부 앱이므로 가장자리가 잘 보이지 않음) 또는 jQuery/jQuery UI (이미 사용함) 중 하나를 사용하는 솔루션을 원합니다.

Answer 1

사용 CSS3의 인 flexbox 레이아웃 : http://www.html5rocks.com/en/tutorials/flexbox/quick/

Answer 2

가 percantage 값 XX (%)로 주위 플레이와 높이와 너비 (픽셀) XX 없습니다.

Answer 3

높이 계산에 jQuery를 사용할 수 있습니다.

우리가 있다고 가정

내가 사양을 검사했지만 인 flexbox 내 문제를 해결하는 방법을 볼 수 없습니다

<div id="parent" style="height:300px; background-color: red;"> 
    <div id="first" style="height:100px; background-color: blue;"> 
    </div> 
    <div id="second" style="height:100px; background-color: #c6c6c6;"> 
    </div> 

    <div id="third" style="background-color: #75ac19;" ></div> 
    <div id="fourth" style="background-color: black;"></div> 
</div> 

<script type="text/javascript"> 
    var parrentHeight= $("#parent").height(); 
    var firstBlock = $("#first").height(); 
    var secondBlock = $("#second").height(); 
    var remainingHeight = parrentHeight - (firstBlock + secondBlock); 
    $("#third, #fourth").height(remainingHeight/2); 
</script>