[thelist] Setting a DIV:overflow's height to match another element's height
Peter-Paul Koch
gassinaumasis at hotmail.com
Wed Mar 19 04:31:01 CST 2003
>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
More information about the thelist
mailing list