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?

Morel

Answer 1

Use the .scrollHeight property of the DOM node: $('#your_div')[0].scrollHeight

Dira

According to the comment here the .scrollHeight DOM function will not work in IE <8.0 (developer.mozilla.org/en/DOM/element.scrollHeight) – Triform

Look here: quirksmode.org/dom/w3c_cssom.html - for IE < 8 the DOM scrollHeight is implemented but incorrectly. For me it works in IE 6, 7 on netrenderer but might not work in all cases. – Triform

scrollHeight also sometimes returns zero when it is hidden (or its parent is hidden), annoyingly. – Polynomial

can you tell me wether it works on opera or not, please? – Labe

More correctly use $('#your_div').prop('scrollHeight'); – Gere

@Simon in my case it's only returning the number of visible pixels in an element with overflow: hidden :/ – Detrital

pure javascript: document.getElementById('your_div').scrollHeight – Abadan

Yeah it doesn't work. Only shows the visible height :( – Triquetrous

For those who don't see the scrollHeight returning the hidden value. Make sure that it is the element you're selecting that really set the max-height (Not that you are setting a max-height to a children and then try to access the child's height from his parent). – Plebeian

@RaphaëlBalet I absolutely am checking the values on the same element that is styled overflow: hidden. At least in Chrome, scrollHeight and clientHeight are always equal when there is overflow in this case. – Parmentier

Answer 2

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.

Gaillardia

Answer 3

Another possibility would be to place the html in a non overflow:hidden element placed 'out' of screen, like a position absolute top and left less than 5000px, then read the element's height. It's ugly, but works well.

Ania

I wouldn't recommend using this for SEO matters it might seems weird to screen reader. If you do this, you would have to put the HTML in a div only for the time you're reading it and remove it immediatly after with javascript. But the accepted answer is better for this situation – Dongdonga

Answer 4

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).

Bifrost

This doesn't work for me in Chrome. In Chrome, scrollHeight seems to very literally mean, height if scroll is enabled. With overflow hidden, scrollHeight always comes back equal to clientHeight. – Parmentier

Answer 5

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:

$(".more").click(function(){
if($(this).parent().find('.showMore').length) {
$(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
$(this).parent().find('.more').removeClass('less').text('More');
} else {
$(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
$(this).parent().find('.more').addClass('less').text('Less');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
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.
</span></div>
<div class="more">More</div>
</div>

(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).

Coverage