# OT: Dynamically calculating the height of an HTML document

**URL:** <https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391>\
**Category:** Rails\
**Created:** [January 17, 2008, 10:23pm UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391 "2008-01-17T22:23:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [January 17, 2008, 10:23pm UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391/1 "2008-01-17T22:23:21Z")

</div>

Apologies for the off-topicness, this is really a Javascript question,  
but I figure someone here may know how to do it.

I need to dynamically add a “footer” to an already existing HTML page,  
sight unseen.

Currently, I insert a

 element just before the end tag, and  
this works most of the time. But, sometimes the 
 is rendered to  
the right of a table _if_ the entire page is laid out in one big table.

I have been unable to come up with a way to force my content into the  
lower left hand corner, even using absolute positioning CSS directives  
(in one case, the table extends beyond what the browser thinks the  
“bottom” of the page is).

I’m looking for a way to inspect the DOM to figure out the height of all  
of the existing content on the page, then I figure I can absolute  
position with a left margin of 0 and a top margin of .

I tried getting document.body.offsetHeight, but this returns 0 in both  
FF and IE.

Anyone have any ideas how to do this, without resorting to manipulating  
any of the existing HTML?

Thanks,  
Wes

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [January 18, 2008, 9:48am UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391/2 "2008-01-18T09:48:09Z")

</div>

without manipulating the html. Well you could throw it out completely  
which is never a wrong move when facing a tabular layout but i digress.

Your best bet is to insert at the end of the body element the footer  
content and just above the footer a clear (ie:

&nbsp;

 blah blah

with css:

#footer{  
float:left;  
}

.clear{  
clear:both;  
height:0;  
font-size:0;  
}

-K

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [January 18, 2008, 5:09pm UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391/3 "2008-01-18T17:09:17Z")

</div>

Keynan P. wrote:

> without manipulating the html. Well you could throw it out completely  
> which is never a wrong move when facing a tabular layout but i digress.

Unfortunately, this is submitted HTML and I don’t have control over it  
before I need to add my footer.

Wes

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [January 18, 2008, 5:48pm UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391/4 "2008-01-18T17:48:09Z")

</div>

Keynan P. wrote:

> without manipulating the html. Well you could throw it out completely  
> which is never a wrong move when facing a tabular layout but i digress.
> 
> Your best bet is to insert at the end of the body element the footer  
> content and just above the footer a clear (ie:
> 
> &nbsp;
> 
> blah blah
> 
> with css:
> 
> #footer{  
> float:left;  
> }
> 
> .clear{  
> clear:both;  
> height:0;  
> font-size:0;  
> }
> 
> -K

Keynan,

Thanks this works well. So I guess a one-table layout comes with an  
implied float: left.

Wes

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [January 18, 2008, 11:34pm UTC](https://www.ruby-forum.com/t/ot-dynamically-calculating-the-height-of-an-html-document/126391/5 "2008-01-18T23:34:58Z")

</div>

On 1/17/08, Wes G. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> I’m looking for a way to inspect the DOM to figure out the height of all  
> of the existing content on the page, then I figure I can absolute  
> position with a left margin of 0 and a top margin of .
> 
> I tried getting document.body.offsetHeight, but this returns 0 in both  
> FF and IE.
> 
> Anyone have any ideas how to do this, without resorting to manipulating  
> any of the existing HTML?

You might try examining the HTML with Firebug to see if there’s  
something else in the DOM that has a height attribute you can use.  
Don’t feel bad if you find nothing, even Gmail uses   
 tags for  
additional spacing in certain “empty” places.

–  
Greg D.  
[http://destiney.com/](http://destiney.com/)