Get height of an element's content

Question

I have a div who's height is set to a pixel height with CSS. It's property overflow is set to hidden. It's contents are greater in size than the set height. How do I get the height of the div's content (all content in total; that is to say what would the height be if it was set to auto)? would var_representing_the_div.innerHeight work?

Here is an example of such div:

div{
  height:100px;
  overflow: hidden;
}

<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque eget mi aliquam malesuada. Vivamus purus augue, vulputate vel mi nec, tincidunt porta libero. Pellentesque scelerisque vulputate auctor. Integer nec tincidunt sapien. Pellentesque quis velit lorem. Fusce faucibus nec odio nec fringilla. Etiam mattis, massa nec eleifend faucibus, nunc mauris eleifend justo, auctor congue dolor sem eu turpis. Phasellus tincidunt urna cursus nibh commodo ultricies.
</p><p>
Curabitur ac tempor ex, quis tristique mauris. Morbi nisi est, vestibulum id viverra non, hendrerit et dolor. Vivamus nibh lorem, tempus at leo sit amet, bibendum elementum dui. Mauris viverra sollicitudin lacinia. Donec sed ante nulla. Quisque tincidunt tincidunt augue. Fusce ultricies, ante non mollis pretium, libero odio rutrum nisi, vitae iaculis quam ligula eu diam. Nullam non nulla dolor. Nulla blandit magna iaculis cursus accumsan. Curabitur ac nunc nec enim mattis molestie. Nam imperdiet quam id lorem gravida tristique. Phasellus est nibh, pulvinar ac ex sit amet, sollicitudin mattis sem. Praesent maximus sit amet augue sit amet sodales. Fusce placerat auctor odio, a vulputate tellus ultricies nec. Cras convallis eros ac ornare suscipit. Suspendisse gravida laoreet nisl, at tristique nibh cursus sit amet.
</p><p>
Suspendisse pellentesque quis massa et convallis. Proin laoreet bibendum nunc, ac fringilla dolor pretium eu. Maecenas nec diam mattis, rutrum magna sed, varius tellus. Pellentesque et sagittis risus, a laoreet neque. Phasellus sodales dapibus massa ac mattis. Phasellus sem eros, malesuada a accumsan sed, dapibus vel urna. Pellentesque eu purus odio. Mauris ligula lorem, tristique imperdiet porta vel, ultricies nec turpis. Sed cursus finibus tempor. Aenean elit velit, posuere id nibh sit amet, volutpat consequat arcu. Proin in eros ipsum. Aliquam at turpis non urna congue accumsan.
</p><p>
Vivamus tincidunt at ante eu imperdiet. Donec a dictum turpis, in pulvinar turpis. Proin et feugiat quam. Etiam sed dapibus elit, ut laoreet lorem. Duis mollis tortor at erat lacinia, id venenatis tortor eleifend. Pellentesque non eros sit amet lacus condimentum suscipit. Phasellus ornare eu elit in placerat. Nunc sed ultrices nunc. Nunc ut lacinia est. Pellentesque placerat porta mi, nec dapibus ante tempor a.
</p><p>
Donec at tortor vel eros lobortis feugiat. Fusce commodo sodales libero auctor volutpat. Phasellus imperdiet finibus erat, eget viverra libero viverra ut. Suspendisse non venenatis est, eget pretium urna. Integer convallis neque nec eros rutrum, id hendrerit ipsum pharetra. Etiam dictum elementum magna, elementum semper lectus fermentum et. Nam sagittis sagittis neque quis semper. Morbi hendrerit libero nec elementum elementum. Donec hendrerit tincidunt arcu, vel bibendum velit suscipit ac. Mauris dolor enim, semper eget libero eget, vulputate accumsan massa. Integer rhoncus egestas tellus et porta. Pellentesque fringilla ac risus nec lacinia. Morbi blandit orci tincidunt libero volutpat, at eleifend augue imperdiet. Nunc non blandit massa, et pharetra massa. Curabitur aliquet augue et elit placerat commodo sit amet id ante.
</p>
</div>

Answer 1

You would use the scrollHeight property:

var el = document.getElementsByTagName('div')[0];
console.log(el.scrollHeight); // height with overflow

DEMO

Answer 2

function myfun() {
  var scrollHeight = document.getElementById('myDiv').scrollHeight;
  document.getElementById('demo').innerHTML = scrollHeight;
}

div{
  height: 100px;
  overflow: hidden;
}

<button onClick="myfun()">Get the div height</button>
<p id="demo"></p>

<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque eget mi aliquam malesuada. Vivamus purus augue, vulputate vel mi nec, tincidunt porta libero. Pellentesque scelerisque vulputate auctor. Integer nec tincidunt sapien. Pellentesque quis velit lorem. Fusce faucibus nec odio nec fringilla. Etiam mattis, massa nec eleifend faucibus, nunc mauris eleifend justo, auctor congue dolor sem eu turpis. Phasellus tincidunt urna cursus nibh commodo ultricies.
</p><p>
Curabitur ac tempor ex, quis tristique mauris. Morbi nisi est, vestibulum id viverra non, hendrerit et dolor. Vivamus nibh lorem, tempus at leo sit amet, bibendum elementum dui. Mauris viverra sollicitudin lacinia. Donec sed ante nulla. Quisque tincidunt tincidunt augue. Fusce ultricies, ante non mollis pretium, libero odio rutrum nisi, vitae iaculis quam ligula eu diam. Nullam non nulla dolor. Nulla blandit magna iaculis cursus accumsan. Curabitur ac nunc nec enim mattis molestie. Nam imperdiet quam id lorem gravida tristique. Phasellus est nibh, pulvinar ac ex sit amet, sollicitudin mattis sem. Praesent maximus sit amet augue sit amet sodales. Fusce placerat auctor odio, a vulputate tellus ultricies nec. Cras convallis eros ac ornare suscipit. Suspendisse gravida laoreet nisl, at tristique nibh cursus sit amet.
</p><p>
Suspendisse pellentesque quis massa et convallis. Proin laoreet bibendum nunc, ac fringilla dolor pretium eu. Maecenas nec diam mattis, rutrum magna sed, varius tellus. Pellentesque et sagittis risus, a laoreet neque. Phasellus sodales dapibus massa ac mattis. Phasellus sem eros, malesuada a accumsan sed, dapibus vel urna. Pellentesque eu purus odio. Mauris ligula lorem, tristique imperdiet porta vel, ultricies nec turpis. Sed cursus finibus tempor. Aenean elit velit, posuere id nibh sit amet, volutpat consequat arcu. Proin in eros ipsum. Aliquam at turpis non urna congue accumsan.
</p><p>
Vivamus tincidunt at ante eu imperdiet. Donec a dictum turpis, in pulvinar turpis. Proin et feugiat quam. Etiam sed dapibus elit, ut laoreet lorem. Duis mollis tortor at erat lacinia, id venenatis tortor eleifend. Pellentesque non eros sit amet lacus condimentum suscipit. Phasellus ornare eu elit in placerat. Nunc sed ultrices nunc. Nunc ut lacinia est. Pellentesque placerat porta mi, nec dapibus ante tempor a.
</p><p>
Donec at tortor vel eros lobortis feugiat. Fusce commodo sodales libero auctor volutpat. Phasellus imperdiet finibus erat, eget viverra libero viverra ut. Suspendisse non venenatis est, eget pretium urna. Integer convallis neque nec eros rutrum, id hendrerit ipsum pharetra. Etiam dictum elementum magna, elementum semper lectus fermentum et. Nam sagittis sagittis neque quis semper. Morbi hendrerit libero nec elementum elementum. Donec hendrerit tincidunt arcu, vel bibendum velit suscipit ac. Mauris dolor enim, semper eget libero eget, vulputate accumsan massa. Integer rhoncus egestas tellus et porta. Pellentesque fringilla ac risus nec lacinia. Morbi blandit orci tincidunt libero volutpat, at eleifend augue imperdiet. Nunc non blandit massa, et pharetra massa. Curabitur aliquet augue et elit placerat commodo sit amet id ante.
</p>
</div>