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.

Answer 1

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;

Answer 2

 //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);