How to get height of entire document with JavaScript

Question

Some documents I can t get the height of the document  to position something absolutely at the very bottom   Additionally  a padding-bottom on  seems to do nothing on these pages  but do on the pages where height will return  Case s  in point   http   fandango com http   paperbackswap com  On Fandango jQuery s   document  height    returns correct value document height returns 0 document body scrollHeight returns 0  On Paperback Swap  jQuery s   document  height    TypeError    document  is null document height returns an incorrect value document body scrollHeight returns an incorrect value  Note  I have browser level permissions  if there is some trick there

User · Answer

To get the width in a cross browser device way use   function getActualWidth         var actualWidth   window innerWidth                          document documentElement clientWidth                          document body clientWidth                          document body offsetWidth       return actualWidth

User · Answer

use blow code for compute height   scroll  var dif   document documentElement scrollHeight - document documentElement clientHeight   var height   dif   document documentElement scrollHeight   px

User · Answer

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   Note that testing the height of the document before the document is ready will always result in a 0  Also  if you load more stuff in  or the user resizes the window  you may need to re-test  Use onload or a document ready event if you need this at load time  otherwise just test whenever you need the number

User · Answer

I lied  jQuery returns the correct value for both pages   document  height       why did I ever doubt it

User · Answer

The proper answer for 2017 is   document documentElement getBoundingClientRect   height  Unlike document body scrollHeight this method accounts for body margins  It also gives fractional height value  which can be useful in some cases

User · Answer

You can even use this   var B   document body      H   document documentElement      height  if  typeof document height      undefined         height   document height    For webkit browsers   else       height   Math max  B scrollHeight  B offsetHeight H clientHeight  H scrollHeight  H offsetHeight        or in a more jQuery way  since as you said jQuery doesn t lie      Math max   document  height      window  height

User · Answer

Add References properly  In my case I was using a ASCX page and the aspx page that contains the ascx control is not using the references properly  I just pasted the following code and it worked     lt script src     js jquery-1 3 2-vsdoc js  type  text javascript  gt  lt  script gt   lt script src     js jquery-1 3 2 js  type  text javascript  gt  lt  script gt   lt script src     js jquery-1 5 1 js  type  text javascript  gt  lt  script gt

User · Answer

For anyone having trouble scrolling a page on demand  using feature detection  I ve come up with this hack to detect which feature to use in an animated scroll   The issue was both document body scrollTop and document documentElement always returned true in all browsers    However you can only actually scroll a document with either one or the other  d body scrollTop for Safari and document documentElement for all others according to w3schools  see examples    element scrollTop works in all browsers  not so for document level          get and test orig scroll pos in Saf and similar      var ORG   d body scrollTop           increment by 1 pixel     d body scrollTop    1          get new scroll pos in Saf and similar      var NEW   d body scrollTop       if ORG    NEW              no change  try scroll up instead         ORG   d body scrollTop          d body scrollTop -  1          NEW   d body scrollTop           if ORG    NEW                  still no change  use document documentElement             cont   dd            else                  we measured movement  use document body             cont   d body                  else              we measured movement  use document body         cont   d body

User · Answer

This cross browser code below evaluates all possible heights of the body and html elements and returns the max found               var body   document body              var html   document documentElement              var bodyH   Math max body scrollHeight  body offsetHeight  body getBoundingClientRect   height  html clientHeight  html scrollHeight  html offsetHeight      The max height of the body   A working example    x000D   x000D  function getHeight   x000D    x000D    var body   document body  x000D    var html   document documentElement   x000D    var bodyH   Math max body scrollHeight  body offsetHeight  body getBoundingClientRect   height  html clientHeight  html scrollHeight  html offsetHeight   x000D    return bodyH  x000D    x000D   x000D  document getElementById  height   innerText   getHeight    x000D  body html x000D    x000D    height  3000px  x000D    x000D   x000D   posbtm x000D    x000D    bottom  0  x000D    position  fixed  x000D    background-color  Yellow  x000D    x000D   lt div id  posbtm  gt The max Height of this document is   lt span id  height  gt  lt  span gt  px lt  div gt  x000D   x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D  example document body content example document body content example document body content example document body content  lt br   gt  x000D   x000D   x000D

User · Answer

The  jQuery method  of determining the document size - query everything  take the highest value  and hope for the best - works in most cases  but not in all of them    If you really need bullet-proof results for the document size  I d suggest you use my jQuery documentSize plugin  Unlike the other methods  it actually tests and evaluates browser behaviour when it is loaded and  based on the result  queries the right property from there on out    The impact of this one-time test on performance is minimal  and the plugin returns the right results in even the weirdest scenarios - not because I say so  but because a massive  auto-generated test suite actually verifies that it does   Because the plugin is written in vanilla Javascript  you can use it without jQuery  too

User · Answer

This is a really old question  and thus  has many outdated answers  As of 2020 all major browsers have adhered to the standard  Answer for 2020  document body scrollHeight  Edit  the above doesn t take margins on the  lt body gt  tag into account  If your body has margins  use  document documentElement scrollHeight

User · Answer

Full Document height calculation   To be more generic and find the height of any document you could just find the highest DOM Node on current page with a simple recursion     function         var pageHeight   0       function findHighestNode nodesList            for  var i   nodesList length - 1  i  gt   0  i--                if  nodesList i  scrollHeight  amp  amp  nodesList i  clientHeight                    var elHeight   Math max nodesList i  scrollHeight  nodesList i  clientHeight                   pageHeight   Math max elHeight  pageHeight                             if  nodesList i  childNodes length  findHighestNode nodesList i  childNodes                        findHighestNode document documentElement childNodes           The entire page height is found     console log  Page height is   pageHeight           You can Test it on your sample sites  http   fandango com  or http   paperbackswap com   with pasting this script to a DevTools Console   NOTE  it is working with Iframes   Enjoy

User · Answer

I don t know about determining height just now  but you can use this to put something on the bottom    lt html gt   lt head gt   lt title gt CSS bottom test lt  title gt   lt style gt   bottom     position  absolute    bottom  1em    left  1em     lt  style gt   lt  head gt    lt body gt    lt p gt regular body stuff  lt  p gt    lt div class  bottom  gt on the bottom lt  div gt    lt  body gt   lt  html gt

[javascript] How to get height of entire document with JavaScript?

Examples related to javascript