Agileview

How do you make a web page stretch to fill the height of a browser window? A lot of sites are arranged with a header, footer, and a space for content in between. This site is a good example. These look fine when there is plenty of content on each page, but when a page has very little content then it ends up looking squashed at the top of your browser window. Here’s a simplified example of what I mean. I’ve tried a number of ways of using CSS to stretch the page, the two most viable being:

1. Set the min-height of the page to 100% of the browser window. This would be a good option if it actually worked. It works ok in firefox and opera, as long as you use ‘position: absolute; bottom: 0;’ for the footer to push it down, but in konqueror and IE it doesn’t work at all.
2. Put a div or background image underneath the page that is set to ‘height: 100%’. This works, but it doesn’t move the footer down, so it just looks silly.

There just doesn’t seem to be a good way of having this work in all browsers using only CSS. I wanted it to work though, so I did what every frustrated web developer does, and used javascript. My solution looks at the height of the browser window, and the size of the content, and then stretches an invisible div within the content to change the size of the content.

In the html just above my footer I added:

<div id='spacer'></div>

Then in css I added:

#spacer {
    padding: 0;
    margin: 0;
    height: 1px; /* don't set to 0 or moz and konq have problems */
}

And finally the javascript:

function elem(id) {
    if (document.getElementById != null) {
        return document.getElementById(id);
    }
    if (document.all != null) {
        return document.all[id];
    }
    if (document.layers != null) {
        return document.layers[id];
    }
    return null;
}

function height(id) {
    var e = elem(id);
    if (e) {
        return parseInt(e.offsetHeight);
    }
    return 0;
}

function windowHeight() {
    var height = 0;
    if( typeof( window.innerHeight ) == 'number' ) {
	//Non-IE
	height = window.innerHeight;
    } else if( document.documentElement && document.documentElement.clientHeight ) {
	//IE 6+ in 'standards compliant mode'
	height = document.documentElement.clientHeight;
    } else if( document.body && document.body.clientHeight ) {
	//IE 4 compatible
	height = document.body.clientHeight;                                                                                                                   }
    return parseInt(height);
}

function stretchPage() {
    var spacer = elem('spacer');
    var newheight = windowHeight() - (height('page') - height('spacer'));
    if (newheight < 1) newheight = 1; // set to 1 because there are bugs in moz and konq when setting height to 0
    spacer.style.height = newheight + 'px';
}

window.onload = stretchPage;
window.onresize = stretchPage;

With all of these put together you have a page which will grow to fill the height of your window in firefox, konqueror, opera, and IE, provided javascript is enabled.