calculate remaining height of body
<script type="text/javascript" >
$(window).load(function(){ // Window load .. to ensure that images are loaded from header and footer part, then the body part is resized
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
//Internet Explorer (backward-compatibility mode):
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
//Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
// most other browsers – as well as IE9 (standards mode):
winW = window.innerWidth;
winH = window.innerHeight;
}
var headerHeight = $("#head").outerHeight(true); // include margin
var footerHeight = $("#foot").outerHeight(true); // include margin
var extraBitForIe8 = 0;
if($.browser.msie && $.browser.version==8)
extraBitForIe8= 4; // For ie 8, to avoid scroll bar
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>