breakthrough design

We can’t tell you how much we love wrestling with CSS bugs/oversights. There’s not a time when we wouldn’t want to kick back, relax, and fumble through 10-odd google pages, looking for a simple solution for giving an element 100% height.

So far, this is one of the best - 100% height solutions out there - looks like the handy work of ppk.

If you’re looking for a quick javascript fix, you’re at the right place! This function below will take in 3 parameters: The Content Object, the Container Object, and the amount of offset you’ll need.

• The Content object will contain your variable content (e.g. a <div> object), and the
• Container object will then be resized by the amount of
• Offset you have defined

Javascript Max-height Solution:

/*****************************
	name:	makeFullHeight
	desc:	gets the height of the content div, and resizes
                   the container to an exact px so that it’s child
                   elements will fill 100% height
	param:	contentobj - the content object (e.g. a div)
		   containerobj - the container object that
                        is being resized
		   offsetpx(integer) - integer amount of px to
                   offset, this will change depending on your
                   application
	note:	MUST BE CALLED AFTER ELEMENTS HAVE
                   LOADED (or before the </body> tag)
*****************************/

function makeFullHeight(contentobj,containerobj,offsetpx){
	if(contentobj && containerobj){
		var contentHeight = contentobj.offsetHeight;
		var newHeight = contentHeight + offsetpx;
		containerobj.style.height = newHeight + ‘px’;
	}
}