ansaurus

Question

Get height of entire document with JavaScript

Answer 1

A:

Do you want to position something at the bottom of the document or the bottom of the screen?

To position at the bottom of the screen you can use

element {position: fixed;bottom:0;left:0}

Nico Burns 2009-07-17 21:56:09

If it matters `position: fixed` is not supported by IE 6 and lower.

jason 2009-07-17 21:59:19

Sorry, should have been more clear. Position it at the bottom of the document.

Nic 2009-07-17 22:00:10

Answer 2

A:

I don't know about determining height just now, but you can use this to put something on the bottom:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

jedihawk 2009-07-17 22:02:12

Trust me, I have exhausted HTML and CSS resources on this one. Can't explain it but you will see the issues if you try this on those sites.

Nic 2009-07-17 22:09:45

Answer 3

A:

I lied, jQuery returns the correct value for both pages $(document).height();... why did I ever doubt it?

Nic 2009-07-17 22:08:49

Answer 4

+5 A:

Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated.

There used to be a complex best-practice formula around for how you tested for correct height/width. This involved using document.documentElement properties if available or falling back on document properties and so on.

The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. This is basically what jQuery does:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

A quick test with Firebug + jQuery bookmarklet returns the correct height for both cited pages, and so does the code example.

Borgar 2009-07-18 15:11:38

rate this solution, because it works when you are using prototype library, with jQuery there is no such issue

se_pavel 2009-09-29 18:28:16

When working with iframes and jquery, because of this method of calculation, the iframe's document height will allways be at least the height of the iframe itselft. This is important to note when you want to reduce the iframe's height to match the content. You first have to reset the height of the iframe.

David Lay 2009-11-30 13:35:41

Chromium (and possibly Chrome/webkit) suports `document.height`

Linus Unnebäck 2010-09-04 21:03:03

ansaurus

tags:

views:

answers:

Get height of entire document with JavaScript

related questions