Adding a bit of length - with Javascript!

Clients can be picky, as you know.

One thing that always crops up is the need to have the footer appear at the bottom of the browser window when there is very little content on the page. You know the problem - with a small page the footer is kicked up as far as the waistband of a pensioner on a day trip to the seaside - not a pretty site. With longer pages this is no problem as the visitor can scroll down the page and the footer is in the correct position.

This can be fixed easily with a little Javascript goodness and a bit of trial and error to determine the positioning.

How does it work?

The problem lies in the fact that the content section of the page in question is not full enough to push the footer down to the bottom of the browser window. We will somehow have to pad the bottom of the content so that the footer appears where we want it.

The markup is simple. Place this under the content on all the pages of the site:

<div id="PagePadder">&nbsp;</div>

The Javascript needed to make this all work is relatively simple too:

stuffPage = function() {
	// OffsetHeight is the distance between the top of
	// the 'PagePadder' DIV block and the bottom of the page. minus the footer height
	//in practice you will have to jiggle this into place...
	var OffsetHeight = 20;
	// get the height of the display area on the browser
	var winHeight = 0;
	if ( typeof( window.innerHeight ) == 'number' ) {
		winHeight = window.innerHeight;	// non IE
	} else if ( document.documentElement && document.documentElement.clientHeight ) {
		winHeight = document.documentElement.clientHeight;
		//IE 6+ in 'standards compliant mode'
	} else if ( document.body && document.body.clientHeight ) {
		winHeight = document.body.clientHeight; //IE 4 compatible
	}
	// get the top of the StuffPage container on the page
	Temp = document.getElementById("PagePadder");
	divHeight = findPosY( Temp );
	if ( parseInt(winHeight - divHeight) - OffsetHeight > 0 ) {
		Temp.style.height = String( parseInt(winHeight - divHeight)
				- OffsetHeight + "px" ); // IE
	}
}
 
function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while ( obj.offsetParent ) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if ( obj.y ) { curtop += obj.y; }
	return curtop;
}
 
addHandler( window, 'load', stuffPage , false );
addHandler( window, 'resize', stuffPage , false );

The script measures the height of the visible portion of the browser window and checks to see if that height minus the location of the top of the PagePadder DIV and minus the OffsetHeight.

The OffsetHeight is the distance from the top of the PagePadder DIV to the bottom of the page. It should be possible to calculate this figure, but in reality it will have to be 'jiggled' into place.

If the figure comes out greater than zero then the footer will not be positioned at the bottom of the browser window, so the script then sets the height of the PagePadder DIV to the calculated figure from the previous step.

And that's about it. Takes about two minutes to jiggle the footers into place and then all you have to do is to remember to include the javascript files on the page - the ultimate set and forget tool.

Some notes...

The addHandler function is the standard function which can be found here.

IE triggers a resize event continuously while Mozilla (Netscape etc...) trigger a resize event after the resize has completed - basically meaning that the footer isnt repositioned in Mozilla until after you stop dragging the window around by the hair.

The non-breaking space in the PagePadder DIV block can be styled to be zero height - I'll leave that up to your fertile (furtive?) imaginations...

The findPosY function is taken from Peter Paul Koch - I had a version of my own working but his solution is more elegant.

Putting it all together

Here's an example for those who need that sort of thing (OK! I do too!)

Set and forget page padding with Javascript »