How do I get the height of a div s full content with jQuery

Question

I am trying to create my own scroll bars  I have tried most of the jquery scrollbar plugins and none of them seem to work for me  so I decided to create my own  I have an overflow area with scrollable content  I can get the scrollbar to work if I am able to figure out the height of the scrollable content area  I have tried  scrollHeight   and the browser doesn t even recognize it  The overflow area has a fixed position

User · Answer

If you can possibly help it  DO NOT USE  scrollHeight    scrollHeight does not yield the same kind of results in different browsers in certain circumstances  most prominently while scrolling    For example    lt div id  outer  style  width 100px  height 350px  overflow-y hidden   gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt div style  width 100px  height 150px   gt  lt  div gt   lt  div gt    If you do      console log     outer   scrollHeight     you ll get 900px in Chrome  FireFox and Opera  That s great   But  if you attach a wheelevent   wheel event to  outer  when you scroll it  Chrome will give you a constant value of 900px  correct  but FireFox and Opera will change their values as you scroll down  incorrect    A very simple way to do this is like so  a bit of a cheat  really    This example works while dynamically adding content to  outer as well        outer   css  height    auto    var outerContentsHeight       outer   height        outer   css  height    350px     console log outerContentsHeight     Should get 900px in these 3 browsers   The reason I pick these three browsers is because all three can disagree on the value of  scrollHeight in certain circumstances  I ran into this issue making my own scrollpanes  Hope this helps someone

User · Answer

Using scrollHeight is not only buggy  but doesn t work when your container has a hardcoded height  which is probably most cases  since you wanna get contents height without doing container height   itself   shazboticus-s-shazbot solution is good when you can mess around with the container height temporarily   have a hard-coded height  An alternative solution would be     x000D   x000D      outer   x000D         Get children in array format  as we ll be reducing them into a single number x000D       contents   toArray   x000D         Filter out text and comment nodes  only allowing tags x000D       filter el   gt  el nodeType     1  x000D         Sum up all the children individual heights x000D       reduce  accumulator  el    gt    el  outerHeight true    accumulator  0   x000D   x000D   x000D    Of course  this latter alternative only works when  outer doesn t have immediate text childrens that take up space and you want to measure  Those are my 2 cents    If you want to measure unwrapped text  I d suggest modifying your DOM tree and having an inner  lt div gt  of which you can measure easily by doing     outer   children   height

User · Answer

You can get it with  outerHeight     Sometimes  it will return 0  For the best results  you can call it in your div s ready event   To be safe  you should not set the height of the div to x  You can keep its height auto to get content populated properly with the correct height       x   ready  function       alerts the height in pixels alert     x   outerHeight          You can find a detailed post here

User · Answer

scrollHeight is a property of a DOM object  not a function      Height of the scroll view of an element  it includes the element padding but not its margin    Given this    lt div id  x  style  height  100px  overflow  hidden   gt       lt div style  height  200px   gt          pancakes      lt  div gt   lt  div gt    This yields 200       x   0  scrollHeight   For example  http   jsfiddle net ambiguous u69kQ 2   run with the JavaScript console open

User · Answer

We can also use -       x   prop  scrollHeight    lt  -- Height -- gt      x   prop  scrollWidth     lt  -- Width -- gt

User · Answer

Element scrollHeight is a property  not a function  as noted here  As noted here  the scrollHeight property is only supported after IE8  If you need it to work before that  temporarily set the CSS overflow and height to auto  which will cause the div to take the maximum height it needs  Then get the height  and change the properties back to what they were before

[jquery] How do I get the height of a div's full content with jQuery?

Examples related to jquery

Examples related to scroll

Examples related to height