How do I get the real height of a overflow hidden or overflow scroll div

Question

I have a question regarding how to get a div height  I m aware of  height   and innerHeight    but none of them does the job for me in this case  The thing is that in this case I have a div that is overflown width a overflow  scroll and the div has a fixed height   If I use  height   or innerHeight    both of them gives me the height of the visible area  but if I want the overflown taken in to account  how do I go about

User · Accepted Answer

Use the  scrollHeight property of the DOM node      your div   0  scrollHeight

User · Answer

Other possibility would be place the html in a non overflow hidden element placed  out  of screen  like a position absolute top and left lesse then 5000px  then read this elements height  Its ugly  but work well

User · Answer

I have just cooked up another solution for this  where it s not longer necessary to use a -much to high- max-height value  It needs a few lines of javascript code to calculate the inner height of the collapsed DIV but after that  it s all CSS   1  Fetching and setting height  Fetch the inner height of the collapsed element  using scrollHeight   My element has a class  section  accordeon  content and I actually run this in a forEach   loop to set the height for all panels  but you get the idea   document querySelectorAll    section  accordeon  content    style cssText    --accordeon-height      accordeonPanel scrollHeight    px     2  Use the CSS variable to expand the active item  Next  use the CSS variable to set the max-height value when the item has an  active class    section  accordeon  content active     max-height  var --accordeon-height       Final example  So the full example goes like this  first loop through all accordeon panels and store their scrollHeight values as CSS variables  Next use the CSS variable as the max-height value on the active expanded open state of the element   Javascript   document querySelectorAll    section  accordeon  content    forEach    function  accordeonPanel         accordeonPanel style cssText    --accordeon-height      accordeonPanel scrollHeight    px            CSS    section  accordeon  content     max-height  0px    overflow  hidden    transition  all 425ms cubic-bezier 0 465  0 183  0 153  0 946       section  accordeon  content active     max-height  var --accordeon-height       And there you have it  A adaptive max-height animation using only CSS and a few lines of JavaScript code  no jQuery required    Hope this helps someone in the future  or my future self for reference

User · Answer

For those that are not overflowing but hiding by negative margin       element   height     -parseInt     element   css  margin-top        ugly but only one that works so far

User · Answer

Another simple solution  not very elegant  but not too ugly also  is to place a inner div   span then get his height    this  find  span  height      Here is an example of using this strategy    x000D   x000D      more   click function    x000D  if   this  parent   find   showMore   length    x000D    this  parent   find   showMore   removeClass  showMore   css  max-height   90px    x000D    this  parent   find   more   removeClass  less   text  More    x000D    else   x000D    this  parent   find   text   addClass  showMore   css  max-height    this  parent   find  span   height     x000D    this  parent   find   more   addClass  less   text  Less    x000D    x000D      x000D     transition  all 0 5s   x000D   text  position relative width 400px max-height 90px overflow hidden   x000D   showMore    x000D   text  after   x000D    content      x000D      position  absolute  bottom  0  left  0  x000D          box-shadow  inset 0 -26px 22px -17px  fff  x000D      height  39px  x000D    z-index 99999  x000D    width 100   x000D    opacity 1  x000D    x000D   showMore  after  opacity 0   x000D   more  border-top 1px solid gray width 400px color blue cursor pointer   x000D   more less  border-color  fff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D   lt div class  text  gt  x000D   lt span gt  x000D  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D   lt  span gt  lt  div gt  x000D   lt div class  more  gt More lt  div gt  x000D   lt  div gt  x000D   x000D   x000D     This specific example is using this trick to animate the max-height and avoiding animation delay when collapsing  when using high number for the max-height property

User · Answer

For more information about  scrollHeight property refer to the docs      The Element scrollHeight read-only attribute is a measurement of the height of an element s content  including content not visible on the screen due to overflow  The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar  It includes the element padding but not its margin

[jquery] How do I get the real .height() of a overflow: hidden or overflow: scroll div?

Examples related to jquery

Examples related to height

Examples related to overflow