如何设置最后一个内部div以使用CSS填充其余包装高度？

Question

I would like to create a wrapper div that contains 2 inner divs so that the wrapper and the first inner divs will have a fixed height and the second inner div will fill the rest of the wrapper height.
I have done something like this:

<div class="frameArea">
   <div class="header"></div>
   <div class="frame"></div>
</div>

My CSS file looks like this:

.frameArea {
   width: 200px;
   height: 300px;
   border: 2px solid black;
}
.frameArea .header {
   background-color: green;
   width: 100%;
   height: 25px;
   font-size: 18px;
   line-height: 25px;
}
.frameArea .frame {
   background-color: white;
   width: 100%;
   height: 100%;
}

The thing is, that using this CSS making the .frame div to be 100% of the , which means he will be 300px instead of what i'm looking for - 275px (in this case when the wrapper is 300px and the .header is 25px).
One way I can do this by setting the height property of .frame using JS code that will calculate and set it dynamically when the document is ready, however I would like to ask if there is any CSS property that does the same in more elegant way?

Thanks!

Answer 1

Here's a jsFiddle with the solution. The answer is a simple CSS solution. Just change the .frame height: 100%; to height: auto; .

EDIT: Sorry, wrong fiddle. Here you go: http://jsfiddle.net/shaansingh/UX6XQ/1/embedded/result/

Answer 2

Using CSS calc()

.frameArea .frame {
    ...
    height: calc(100% - 25px);
}

DEMO

calc() is not compatible with older browsers and thus might give you compatibility problems, to overcome this I suggest you use JavaScript solution.

A jQuery Solution

var h = $('div.frameArea').height() - 25;
$('div.frame').height(h);

DEMO