div height 100% problem

Friday 02 July 2004 3:14:35 am

Try adding this to your css:

/* Fix for body height problem, from: http://www.sitepoint.com/forums/showthread.php?t=166525 */
.clear
{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
}

/*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/
* html .clear
{
	display:none	
} 

and then in your html at the end before the final </div> (though it may just be necessary in the center div).

  <div class="clear">&nbsp;</div>

Its a hack but seems to work.

paul

--
http://www.visionwt.com

Friday 02 July 2004 6:10:16 am

Im away for the weekend now so i cant help any further, sorry.

But, play around with that code and follow the link given. It does do what you want.

paul

Friday 02 July 2004 1:57:22 pm

I recently had to deal with this for work. Some javascript takes care of the problem. Feel free to re-use this function if you find it useful. I found it works pretty well. The only requirement is that you place your 3 columns inside another DIV so there is some useless markup but it pays off.

function equalHeights(element) {
		var content = document.getElementById(element);
		var desiredHeight = content.offsetHeight;
		var contentDivs = content.getElementsByTagName('div');
		for(i=0; i < contentDivs.length; i++) {
		if (contentDivs[i].parentNode.id == element) {
			contentDivs[i].style.height = desiredHeight + 'px';
			}
		}
}

Then just call the function on page load using your favorite method (I like using addEvent), passing the DIV that contains all 3 columns

 
equalHeights('column_container_div');

This won't work on anything that doens't support the W3C DOM but it will still degrade very well. Hope it helps you out.

--Patrick
http://www.hakjoon.com/

--
www.hakjoon.com

Friday 27 August 2004 4:29:42 pm

I created the code in Mozilla, so in my experience it works. Are you using floats by any chance? In Mozilla a container won't expand to the height of floated children unless the container itself is floated. Could that be the reason?

I have a new version that takes margins and padding into account but I need to tweak it a little bit more. I'll release it to the forum once I have it all tweaked.

I'd be happy to take a look at stuff and see if I can figure out why it's not working for you.

--Patrick

--
www.hakjoon.com