为什么不计算这个div高度？

Question

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/

Answer 1

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.

Answer 2

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