getting the content Height ?

[i00]

ok - what i want 2 do is 2 somehow return the height of what is on a web page so that if i have text that goes 200px down the page and nothing else i get 200 returned.

assume it would be start be document.body.something?

thanks in advance
Kris

[CornedBee]

Funny enough, there is no easy and reliable way to get the total content height. Weird, isn't it?

Basically, you would use document.height to get the total height, but absolutely and fixedly positioned elements are not counted in this, so the calculation could be entirely wrong.

What you would thus have to do would be to:
1) Get document.height. Store.
2) Go through all elements and find those that are absolutely positioned. Get height and vertical offset. Use to calculate lower edge of each. Store. Don't forget to take positioning rules in account - absolute within absolute or relative is positioned relative to outer.
3) Go through all elements and find those that are fixedly positioned. Get height and vertical offset. Use to calculate lower edge of each. Store. Again, there might be other elements within.
4) Go through all elements and find those that are relatively positioned. Find offset and height. Use to calculate lower edge. Repeat for inners.

Then take the maximum of all these values and you have the lower edge of the content.

This is a VERY complex matter. There is a way that is a little easier and works pretty well, but by no means perfectly.

Mozilla can use this for content that is shorter than the screen:

var totalHeight = document.height;

and this if it is longer:

var totalHeight = window.innerHeight + window.scrollMaxY;

IE has neither of these properties. In IE, you do this:

var totalHeight = document.documentElement.scrollHeight;

As a result, this seems to do pretty well:

var totalHeight = window.innerHeight ?
	window.scrollMaxY ?
		window.innerHeight + window.scrollMaxY :
		document.height :
	document.documentElement.scrollHeight;

However, it does not work in IE when position:relative is used on the element that defines the lowest edge. IE doesn't generate a scrollbar either.
Neither does it work in Mozilla if the lowest element has fixed or absolute position and the content is not long enough to create a scrollbar.
document.documentElement.scrollHeight has a result in Mozilla, too, but it always has a minimum of window.innerHeight, so it fails if the content is shorter than the window, too.

To sum it up, the entire situation is horrible. A solution that works cross-browser might be found, but requires more experimenting and testing. Using only two browsers (or even one), I was unable to find a satisfactory result, but if you also want to satisfy Safari and Opera, I shudder to think what would be necessary.