JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div id="test">
    safsadkfj aksdfkl jasdkjf lakjsd flkjas dfkl<br/>
    <img src="https://lh4.ggpht.com/_t4E434WA0vGFR-BnO3Q-0XLLhxQd9DzXx9CePb952RwIt5qwwS0dMw3MAY40Rk1XbuW98aMSxAXJhlnMWlbr7nD-K8Bxvu0CJo8x1s" height="400" alt=""/>
</div>
<pre id="log">
    
</pre>

CSS

div {height:200px;background:blue;overflow:auto;padding:30px;}
img {position:absolute;}
#log {position:fixed;bottom:40px;left:40px;color:green;height:auto;background:none;}

JavaScript

$(document).ready(function(){
    var d = $('#test');
    var j = {
        height1: d.height(),
        height2: d.outerHeight(),
        height3: d[0].clientHeight,
        height4: d[0].scrollHeight,
        height5: measureNode(d[0])
    }
    $('#log').html(JSON.stringify(j, null, 4));       
})

function measureNode(node){
    var height = 0;
    if (document.createRange) {
	    var range = document.createRange();
		    range.selectNodeContents(node);
		    if (range.getBoundingClientRect) {
		        var rect = range.getBoundingClientRect();
		        if (rect) {
		            height = rect.bottom - rect.top;
		        }
		    }
    }
    return height
}