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

[Francois Jordaan]

Please have a look at this page:
http://www.fjordaan.uklinux.net/wf/test-home.html

The "Choose a Service" scrolling box on the right is a DIV with
overflow:auto. Its height is supposed to match the "Department" buttons on
the left, that may vary in number. I'm currently accomplishing that with the
setScrollerHeight javascript function at the start of the page, that takes
the offsetHeight of a containing DIV around the buttons, and gives that
height (minus 7px) to the scroller DIV, which has no default height set in
the CSS.

In an email to CSS-discuss, I'm asking whether I could accomplish this
without scripting.

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?

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.

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;

Thanks for any help!

francois

_____________________________________________________________________
This e-mail has been scanned for viruses by MessageLabs.