Why is this div height not calculated?

Problem

Does anybody know why the Height of the yellow-box is not calculated correctly (100px)?

I need to know define the css so the JavaScript-Part knows the real height...

<div id="footer">
 <div class="header">
  Header
 </div>
 <div class="content">
  Content blub    
 </div>
</div>​

Here is a jsFiddle - http://jsfiddle.net/3nM7f/

Problem courtesy of: Matty

Solution

It's because you're defining it using percentages % instead of pixels px.

You need to change

.content{
    height:100%;   
    background-color:yellow;
}

to 

.content{
    height:100px;   
    background-color:yellow;
}

and all your sections will appear correctly.

jsfiddle here.

Solution courtesy of: lifetimes

Discussion

Height 100% always takes the height of the parent div. You can use javascript to set its height if you want. You need to include jquery js file in your website header. syntax maynot be 100% correct but you can use the concept

var height = $(".footer").css("height") - $(".header").css("height");
$(".content").css("height",height);
Discussion courtesy of: S. Swaroop

This recipe can be found in it's original form on Stack Over Flow.