Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

height of page in javascript

I'm unable to get the height of a page in javascript when the page is larger than the screen.

I thought this would get me the right height:

$(document).height();

but that only gets the height of the screen, same as:

$('body').height();

same as:

document.offsetHeight;

For some reason all these examples only return the height of the screen. Can somebody help?

like image 473
jzp74 Avatar asked Jul 18 '09 14:07

jzp74


People also ask

What is height in Javascript?

The height property sets or returns the height of an element. The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property. Tip: Use the width property to set or return the width of an element.

How do you get height in HTML?

clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.

What is $( document height ()?

$(document). height() returns an unit-less pixel value of the height of the document being rendered. However, if the actual document's body height is less than the viewport height then it will return the viewport height instead.


1 Answers

Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.

To clarify the usage of the height() method:

$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height();         // returns height of browser viewport
$(document).height();       // returns height of HTML document

I suspect, that if $(document).height() is not working for you, something is wrong. You may be:

  1. Calling it too early. Like, before the DOM is ready
  2. Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
  3. Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
like image 188
jason Avatar answered Oct 16 '22 09:10

jason