css div take remaining screen height
height:100vh;
/* 1vh is 1% of the browser size. With 100vh you can fill the complete height */
/* if you want the div to fill not only the size of the browser, but */
/* the complete website then use this: */
position: absolute;
height: 100%;
width: 100%;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>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
