Add a DIV that takes up all available vertical space

Question

I have an empty page with one DIV on it:

<div style="height: 20%;
            min-height: 10px;
            max-height: 100px;
            width: 100%;
            background-color: blue;"></div>

I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?

I've spent all day on this and CSS is starting to drive me crazy.

Answer 1

What has to be inside this div?

If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?

It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.

EDIT: code example: http://jsbin.com/efefe/2