Breaking News: Grepper is joining You.com. Read the official announcement!

calculate remaining height of body

Fantastic Fish answered on September 8, 2021 Popularity 6/10 Helpfulness 1/10

answer calculate remaining height of body

calculate remaining height of body

Comment

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

Popularity 6/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: height whatever

Link to this answer
Share Copy Link

Contributed on Sep 08 2021

Fantastic Fish

0 Answers Avg Quality 2/10

calculate remaining height of body

Contents

More Related Answers

calculate remaining height of body

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.