<script type="text/javascript" >
$(window).load(function(){
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var headerHeight = $("#head").outerHeight(true);
var footerHeight = $("#foot").outerHeight(true);
var extraBitForIe8 = 0;
if($.browser.msie && $.browser.version==8)
extraBitForIe8= 4;
var bodyHeight = winH - headerHeight - footerHeight - extraBitForIe8
$("#body").height(bodyHeight);
})
</script>
</head>
<body >
<div id="head" style="background:red; margin:10px; padding:10px; color: white" >Header content goes here <br> Header content goes here <br> Header content goes here</div>
<div id="body" style="background:black; color:white; margin:0 10px; padding:0 10px;" >Body content goes here <br>Body content goes here <br> Body content goes here </div>
<div id="foot" style="background:yellow; margin:10px; padding:10px;" >Footer content goes here <br> Footer content goes here <br> Footer content goes here</div>
</body>