Como fazer a metade inferior de uma página ocupar a altura restante? - css, css3

Eu procurei e tentei um monte de coisas diferentes. altura variável tophalf, e a metade inferior deve preencher o espaço restante. Um JSfiddle:

http://jsfiddle.net/UCJmQ/

CSS:

.top {
background-color: lightblue;
height: 300px;
}
.bottom {
background-color: green;
min-height: 100px;
overflow: hidden;
height: 100%;
}

html, body {
height: 100%;
}

HTML:

<div class="top"></div>
<div class="bottom">

</div>

O que eu estou vendo agora é a página verde ocupando toda a altura da janela, não a altura restante. Como posso fazê-lo tomar a altura restante em vez disso?

Respostas:

http://jsfiddle.net/ph35V/

<div class="wrapper">
<div class="top">
300px
</div>
<div class="bottom">
Remaining height
</div>
</div>

html, body {
height: 100%;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.top {
display: table-row;
background: lightblue;
height: 300px;
}
.bottom {
display: table-row;
height: 100%;
background: green;
}

Poderia também usar dimensionamento de caixa: caixa de borda ou posições absolutas conflitantes

É aquele altura variável especificado em CSS ou não?

Do violino, presumo que seja. Se esse for o caso, tente position: absolute com left, bottom, right definido como 0 e top para a altura superior do div:

DEMO