JQuery .height() not working properly

JQuery .height() not working properly

I am making a calendar website. In this I have a calendar div in which the
calendar loads, wrapped inside a content div. In this header and footer
are of fixed position. The calendar loads in the blue part.

HTML
<div class ="content">
<div id="calendar"></div>
</div>
CSS
.content{
background: #fcfcfc;
height: 100%;
margin: -70px 0 -20px;
padding: 70px 0 20px;
}
#calendar{
background: #fcfcfc;
margin: 10px 10px 10px 10px;
border: 1px solid #888;
}
JS
var calHeight = $(".content").height();
From the image I think calHeight should give something around 390 but its
giving 594 in chrome and 565 in firefox..
What should I do to get calHeight the displayed size?