how to make a div inside a div-popup to use all the rest of popup-height

Question

I have a popup which has a height of about 70% of the screen. I this popup I have 2 divs,

1. the header-div with a fixed height of e.g. 20px
2. and a content-div which should use the rest of height available.

Currently I use a jquery function to get the rest height and assign it to the content-div

    var popup  = $("#popup").height();
    var header = $("#header").height();
    $("#content").height(popup-header);

Is there another/better way to do that, or is it possible to use css only?

Here's a jsfiddle, in the example the content-div is set to 95% which results in the div beeing to high.

http://jsfiddle.net/JhN4j/6/

Answer 1

Is this what you're looking for: jsfiddle.net/v6x35/