Get auto height of an element without setting height to auto

Question

I'd like to get the height of an element, if said element was currently set to height:auto;, without actually setting the elements height to auto.

Pretty straight forward, but I can't figure out how to obtain the auto height value without first setting the element's height to auto. That's the part I'm trying to avoid.

Anyone know how I would do this?

---

This jsfiddle will demonstrate my issue.

I'm trying to set all three headings to the same height. When resize the window I need the heights to adjust. With the current script the height is first set to auto, which causes the height to jump around a bit. I'm trying to avoid this jump.

---

I'll try to clarify the jump I'm referring to - When you resize the window, if the heading heights change, the animation to the new height will start. However the animation always resets to it's 'auto' height before the animation starts.

So for example:

1. Auto height = 20px
2. On resize all elements animate from auto height (20px) to new height (ie - 40px)
3. If resized again all elements reset to auto height (20px) THEN animate to another new height (ie - 60px)

So if you consider step 2 to 3, my goal is to have the animation start from the current height (40px) and proceed to the new height (60px), instead of resetting to the auto height (20px) before animating to the new height (60px).

Hopefully this helps even further...

Answer 1

You can take the scrollHeight of the element and optionally add top and bottom padding and border depending on the box-sizing property.

You may get into some inconsistencies with different browsers (see https://stackoverflow.com/a/15033226/1669279), but if you really want to avoid changing the height property, this is the only way.

Oh, one other idea: you can set the height of the parent to auto and set the height of the element to some % value, which will turn the computed value to auto. Not sure if that is in the spirit of the question even if you don't literally set the height to auto.

You can make the following changes in your JsFiddle according to my (first) suggestion:

heading.each(function () {
    var computedStyle = window.getComputedStyle(this);
    var height = this.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) - parseInt(computedStyle.borderTop) - parseInt(computedStyle.borderBottom);
    if (height > h) {
        h_elem = this;
        h = height;
    }
});

Answer 2

"With the current script the height is first set to auto, which causes the height to jump around a bit. I'm trying to avoid this jump."

---

I don't understand what do you mean when you say "The height jump around", maybe because you animate height without .stop() but here's a Fiddle, and bellow you can see the change. If that's the jumping you're talking about...

heading.stop().animate({height:h+"px"},200); // Animate with .stop()

// or

heading.css({height:h+"px"},200); // Change height with CSS

In latest Chrome looks nice.