To ensure a consistent bottom background at all times on the page, I devised a method to determine whether or not the bottom part needed to be pushed down based on the window height and main content height. However, I encountered an issue when the content block was too short relative to the larger computer screen, resulting in the bottom background being right at the end of the content with a gap until the bottom of the screen. To rectify this, I decided to increase the height of the content so that it adequately fills the space at the bottom, eliminating the gap.
Below is the JavaScript solution I implemented:
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";
}
};
Unfortunately, this script works effectively across browsers except for IE7-IE8. I am seeking assistance in finding a solution for these older IE browsers.
Thank you, Art