How do you get the rendered height of an element?

How do you get the rendered height of an element?

How do you get the rendered height of an element?
Let’s say you have a

element with some content inside. This content inside is going to stretch the height of the

. How do you get the “rendered” height when you haven’t explicitly set the height. Obviously, I tried:
var h = document.getElementById(‘someDiv’).style.height;

Is there a trick for doing this? I am using jQuery if that helps.


Solution 1:

It should just be


with jQuery. This retrieves the height of the first item in the wrapped set as a number.

Trying to use


only works if you have set the property in the first place. Not very useful!

Solution 2:

Try one of:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight includes the height and vertical padding.

offsetHeight includes the height, vertical padding, and vertical borders.

scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Solution 3:

NON JQUERY since there were a bunch of links using in the top of these answers…





Or one of my favorite references:

Solution 4:

You can use .outerHeight() for this purpose.

It will give you full rendered height of the element. Also, you don’t need to set any css-height of the element. For precaution you can keep its height auto so it can be rendered as per content’s height.

//if you need height of div excluding margin/padding/border

//if you need height of div with padding but without border + margin

// if you need height of div including padding and border

//and at last for including border + margin + padding, can use

For a clear view of these function you can go for jQuery’s site or a detailed post here.

it will clear the difference between .height() / innerHeight() / outerHeight()

Solution 5:

style = window.getComputedStyle(your_element);

then simply: style.height

Solution 6:

I use this:


It also works when you use the virtual DOM. I use it in Vue like this: