Ako vytvoriť spodnú polovicu stránky zaberie zvyšnú výšku? - css, css3

Hľadal som a vyskúšal som veľa rôznych vecí variabilnou výškou horná polovica a dolná polovica by mala zaplniť zvyšný priestor. 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 som teraz videl, je zelená stránka, ktorá zaberá výšku celého okna, nie zvyšnú výšku. Ako môžem urobiť, aby namiesto toho zostala zostávajúca výška?

odpovede:

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

Mohol by tiež použiť veľkosť škatule: hraničný box alebo protichodné absolútne pozície

Je to tak variabilnou výškou špecifikované v CSS alebo nie?

Z husle predpokladám, že je. Ak je to tak, skúste to position: absolute s left, bottom, right nastavený na 0 a top k hornej výške div:

DEMO