Height of content inside a div

Question

The content of a page is loaded inside a div:

<div id="content">Some content</div>

The div has a fixed height and uses scroll in case of overflow. I want to adjust the height (make it smaller) of the div onload if the content does not need the fixed height of the div. How can i meassure the height of the content inside the div?

I tried to work the other way arround. No fixed height and after loading of the page meassuring the height of the div and on overflow adjusting the height of the div to a certain max. But that gave problems with certain images in the content that have no set height and width. The browser gives back a wrong height of the div because the images may not be loaded yet. Even with $(window).ready(...

Any help is appreciated!

Answer 1

What about just setting max-height in the CSS?

And for IE6, you could use CSS expressions:

<!--[if lte ie6]>
<style>
#content {
   height: expression( this.scrollHeight > 499? "500px" : "auto" ); 
}
</style>
<![endif]-->

This is very ugly, but so is IE6...