Extending Element to Scroll Height [Archive]

View Full Version : Extending Element to Scroll Height

Graeme Hackston

06-30-2002, 05:44 PM

I'm using a basic left navigation 2 table layout. In a small window and when absolutely positioned navigation elements in the left table are taller than the table, the navigation elements extend further than (below) the left table. How can I size the left table to 100% of the scroll height and not the window height?

I've been playing with this bit of code but haven't made anything work

if ((document.getElementById('Left_Table').clientHeight)<document.body.scrollHeight)

Is there a simpler method of doing this that I'm missing?

Thanks for your help.

TrueLies

06-30-2002, 09:04 PM

Hi

could you elaborate a bit more? What do you precisely mean by:
-----
100% of the scroll height and not the window height
-----

apparently, that is the same thing as I understood it: the window height, in fact, is also the space where you scroll.
If you want to take into account the level of the page you've scrolled at (and therefore sum, for instance, top+scroll level):

document.body.scrollTop

ciao

Graeme Hackston

07-01-2002, 01:08 AM

Hi TrueLies

I guess I'm on the wrong path. I need the height of the entire HTML document then size the table to the same height.

Is that what I'll get with document.body.scrollTop?

TrueLies

07-01-2002, 02:28 AM

Oh for the height of the whole document you mean; well, yes document.body.scrollHeight gives the height of the whole document.
But you probably can't get an effective resizing of your table to that. Height property never made much on tables althouhg all manuals cite it. Make a transparent gif of 0.5x0.5 then once you get the height you might rrsize the gif height to the yielded value to stretch the table.

I don't know what type of problem you've encountered anyway.

On NN4 and 6 you don't have an equivalent of document.scrollHeight, for it is false that window.innerHeight is equivalent: innerHeight always give the same value: the height of the available window, not the length of the document. Thorny I know!

PS this is why persuing these groups is useful. See what I just attempted with NN6 to see if I could get the document height: ...
document.height
guess what: works!!!
So the equivalent of scrollheight is, for the document, in NN6 just... height!
Unbelievable, do you know that many sites do cite window.pageYOffset and/or window.innerHeight (the latter more than the former, but both assumptions prove wrong) like the NN equivalent??
http://www.siteexperts.com/tips/functions/ts15/page1.asp
or
http://www.dansteinman.com/dynduo/en/widthheight.html

were urls I searched for to answer you but their codes weren't doing what they said in THIS case at least: no equivalence between document.body.scrollHeight and window.pageYOffset or window.innerHeight, but equivalence inddeed with document.height.
Now I check on NN4 too... wait...
WORKS! wow! This is why attending these groups is great isn't it? :)
ciao!

And as the saying goes thax for your question -this time indeed LOL

Graeme Hackston

07-01-2002, 06:17 PM

<edit>this does not work. See next post</edit>
Thanks for the info and links TrueLies, it is helpful.

So would this be the right approach and, if so, how would I size an image to match
the document.height and document.body.scrollHeight?

P.S. this appears to work in Mozilla only so far because if you reduce or enlarge the height of the window in IE it will give a different value for the ScrollHeight (as I see it it should be a constant value as in Mozilla)

<html>
<head>
<title>Test</title>
</head>
<body>
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
content 
<script>
//if Mozilla
if (window.innerWidth)
document.write("Mozilla: document is "+document.height+" and client window is "+window.innerHeight)
//else IE
else if (document.all)
document.write("IE: document is "+document.body.scrollHeight+" and client window is "+document.body.clientHeight);
</script>
</body>
</html>

Graeme Hackston

07-02-2002, 12:33 AM

I found Dave Clarks script in the archived thread below. It works for me with a nested div aligned bottom inside the parent.

http://www.codingforums.com/ubb/Forum3/HTML/004308.html

Thanks for following my "madness" Truelies (lol)