[thelist] Setting a DIV:overflow's height to match another element's height

[Peter-Paul Koch]

>Please have a look at this page:
>http://www.fjordaan.uklinux.net/wf/test-home.html
>
>In my question to thelist, I'm focusing on two problems with this 
>javascript approach:
>
>1. The visible "shrinking" of the page, in a two-stage render. First the 
>DIV renders to its full length, then when the page finishes loading, the 
>script resizes it. Especially if cached, this happens so fast it hardly 
>matters, but in Opera 7 it leaves some screen artifacts until the page is 
>refreshed again. Can this be avoided?

Not really. You have to give the command to resize the DIV at some time, and 
onLoad is the best choice. And Opera has more drawing problems than just 
this one.

>2. The fact that it is scripting-dependent. Currently, if scripting is
>disabled the DIV expands to fit its contents. I'd prefer to give it a
>minimum default height (ideally, 10.5em), but this causes a bug in
>IE6/Win2000 where a horizontal scrollbar appears on the DIV.

Very weird. Did you remove the DOCTYPE and see if that helped IE6?

>Of course, if a CSS-only solution is found, both questions are moot. But in 
>case I have to go with a javascript solution, can my method be improved on, 
>especially to address the above problems? Note: I'm a javascript novice. I 
>have no idea whether setScrollerHeight (pasted below) is well-implemented 
>at all.
>
>function setScrollerHeight() {
>	if (!document.getElementsByTagName) return;
>	var h=parseInt(document.getElementById('deptcolumn').offsetHeight);
>	document.getElementById('scrollerdiv').style.height=(h-7)+"px";
>}
>window.onload = setScrollerHeight;

Yup, it's a pretty OK script. The only thing that might get you into 
problems is that IE and Mozilla interpret offsetHeight differently because 
of their different box models. But if you tested it and it works in both, 
don't change it.

--------------------------------------------------
ppk, freelance web developer
Interaction, copywriting, JavaScript, integration
http://www.xs4all.nl/~ppk/
Column "Keep it Simple": http://www.digital-web.com/columns/keepitsimple/
W3C DOM Compatibility Table, expanded & updated
http://www.xs4all.nl/~ppk/js/index.html?version5.html
--------------------------------------------------



_________________________________________________________________
MSN 8 helps eliminate e-mail viruses. Get 2 months FREE*. 
http://join.msn.com/?page=features/virus