Como dividir a altura restante entre dois elementos? - javascript, jquery, html5, jquery-ui, layout

Este é um problema bastante comum para o qual ainda tenho que encontrar uma solução elegante:

Eu tenho um par de elementos de bloco (digamos, 4) em um div. Um layout vertical muito simples.

Os dois primeiros elementos possuem alturas fixas. Os dois elementos restantes devem dividir o espaço restante (ou seja, altura do corpo - altura do primeiro elemento - altura do segundo elemento).

Eu sei que posso calcular os tamanhos, mas existe uma maneira elegante de conseguir isso?

Eu gostaria de uma solução que usa os recursos nativos do navegador (é um aplicativo interno que só roda em versões modernas do Firefox / Chrome, assim que o "edge edge" está OK) ou jQuery / jQuery UI (nós já o usamos).

Respostas:

Use layout de flexbox CSS3: http://www.html5rocks.com/en/tutorials/flexbox/quick/

Você pode usar o jQuery para calcular a altura.

suponha que temos:

<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>

Brinque com o valor de porcentagem xx (%) e não xx (px) para a altura e largura.