IE8 JavaScript issue

Question

I need to have a bottom bg at the bottom of the page all the time, so I came up with a decision to get window height and main content height and calculate if the bottom part should be pushed down or not. The problem came up when the content block was too short and the computer screen was much bigger, so the bottom bg was right at the end of the the content and had nothing after till the end of the bottom screen. Hopefully it makes sense ) I decided to add some height inside of the content to make it longer so it fills up the bottom space and very bottom gap disappear.

Here is the JavaScript I used to fix it:

window.onload=function(){
    var winHeight = window.innerHeight;
    var fixIt = winHeight - 200;
    var divHeight = document.getElementById('bottomDiv').clientHeight;
    alert(winHeight - divHeight);
    if (divHeight < winHeight) {
        var fire = document.getElementById('innerDiv').style.height = fixIt + "px";
    }
};

Problem: this script works fine and does its job well in all browsers but not IE7-IE8. Can you please help to get a solution for old IE browsers?

Thanks, Art

Answer 1

window.onload=function(){
    //                                 v---------------------------------------v
    var winHeight = window.innerHeight || document.documentElement.clientHeight;
    var fixIt = winHeight - 200;
    var divHeight = document.getElementById('bottomDiv').clientHeight;
    alert(winHeight - divHeight);
    if (divHeight < winHeight) {
        var fire = document.getElementById('innerDiv').style.height = fixIt + "px";
    }
};

Answer 2

Maybe instead you could apply your "bottom" background to the html element, then cover it up with a different background (possibly in your div#content) in the upper region.

Otherwise, it seems innerHeight isn't supported in IE8.

window.innerHeight ie8 alternative

Try

var winHeight = document.documentElement.clientHeight