How to get inner HTML content height

Question

I want to get inner html height by JavaScript. Suppose I have

<div>Content</div>

either if the div font size has increased or many divs nested inside the parent, how do I get the height of parent div?

edit: even if the nested div has border and padding too.

Possible duplicate of [Get div height with plain JavaScript](http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript) — Arun Kumar Mohan, Aug 11 '16 at 18:11
Possible duplicate of [CSS / JavaScript - How do you get the rendered height of an element?](http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element) — Heretic Monkey, Aug 11 '16 at 18:11

score 23 · Answer 1 · answered Nov 21 '19 at 14:04

23

The accepted answer is incorrect in the case that the parent element has a height of 0, and you want the height of the content within it (which is what I believe the OP was asking for). In that case, scrollHeight is the property you want.

const divInnerContentHeight = document.querySelector('div').scrollHeight;

Using clientHeight or offsetHeight would return 0;

answered Nov 21 '19 at 14:04

Matt

988
9
14

1

This is the best answer, it allows you to get the inner height without knowing anything about the contents. – Tim Hettler Feb 13 '20 at 20:06
This is the right answer.. – Jishnu V S Sep 27 '21 at 10:24

Danny Buonocore · Accepted Answer · 2019-09-19T00:25:29.377

13

If it must be in vanilla JS...

var height = document.getElementById('content').clientHeight;

That will not include any borders or scrollbars in the element, just padding. If you want to include borders and scrollbars you may use offsetHeight instead.

edited Sep 19 '19 at 00:25

answered Aug 11 '16 at 18:10

Danny Buonocore

3,731
3
24
46

3

`clientHeight` include just the padding, and `offsetHeight` includes padding, borders, and scrollbars – Rainbow May 09 '18 at 15:09

score 2 · Answer 3 · answered Aug 11 '16 at 18:11

2

Use clientHeight and getElementsByTagName div to get spcific div height

document.getElementsByTagName('div')[0].clientHeight

http://codepen.io/nagasai/pen/XKoxZw

answered Aug 11 '16 at 18:11

Naga Sai A

10,771
1
21
40

score 1 · Answer 4 · answered Aug 11 '16 at 18:10

1

Something like this?

<div id="MyDiv">Content</div>

console.log(document.getElementById("MyDiv").offsetHeight);

answered Aug 11 '16 at 18:10

mituw16

5,126
3
23
48

score 1 · Answer 5 · edited Sep 19 '19 at 00:18

1

Include padding and border in your height calculation:

document.getElementById('myDiv').offsetHeight;

edited Sep 19 '19 at 00:18

Danny Buonocore

3,731
3
24
46

answered Aug 11 '16 at 18:28

score 1 · Answer 6 · answered Oct 21 '21 at 14:19

1

you can you content(ele) scrollheight to height of content.

ele.scrollHeight

answered Oct 21 '21 at 14:19

Ali Raza

1,026
13
20

score 0 · Answer 7 · answered Sep 16 '20 at 18:27

 //We can do his using JQuery

    //Returns the element's height
    $('#content').height();
   // Returns the height with padding
    $('#content').innerHeight();
   // Returns the height with padding and border
    $('#content').outerHeight();
   // Returns the height with padding,border and margin
    $('#content').outerHeight(true);

How to get inner HTML content height

7 Answers7