Getting the rendered height of a html body tag

I came across this problem the other day.

I have a html page with a couple of divs in the body tag. My divs had lengthy text and images. Hence, when I made the border of page visible (by setting the border style of the body tag), the border encaptulated all the divs and was visible when i scrolled down.

When I then included a div that had a background image that I wanted to repeat vertically, this image only got repeated to the height of my screen (i.e. when I scrolled to the bottom of the page, I could see that the image did not get rendered all the way to the bottom). I used height = 100% for the style of this div.

After poking around, I realised that the height=100% means that the div (containing the vertical image) only had a height that was equivalent to the height of the visible screen. To get the FULL height of the body, I had to use this function, called from the body's onLoad event:

function borderheight()
{
var leftborder = parent.document.getElementById('leftborder');
leftborder.style.height = document.body.clientHeight + "px";

var rightborder = parent.document.getElementById('rightborder');
rightborder.style.height = document.body.clientHeight + "px";
}


Hope using clientHeight helps all of you who come across this problem.