Visual Illustration of Offset Height, Client Height & Scroll Height

offsetHeight, clientHeight & scrollHeight can best be understood with a live DOM element, and this is what this article does.

For a detailed tutorial see Understanding clientHeight, offsetHeight & scrollHeight.

In short here's what they represent :

• offsetHeight = VISIBLE content & padding + border + scrollbar
• clientHeight = VISIBLE content & padding
• scrollHeight = ENTIRE content & padding (visible or hidden)

Consider the below <div> element. The contents of the element are bigger than the given dimensions of the element, so there is both a vertical and horizontal scrollbar present. It has a 10px green border and 20px padding.

Click on the respective buttons to see the offsetHeight, clientHeight & scrollHeight for this element :

Also after you click on the scrollHeight button, try scrolling the element vertically. You will see how the actual position of the contents of the element changes while scrolling.

HTML & CSS

<div id="main-element-outer">
	<!-- This is the element that demonstrates the various heights -->
	<div id="height-container">&varr;</div>
	<!-- This is the element for which heights are calculated -->
	<div id="main-element">
		<div id="child-element">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
	</div>
</div>
<div id="buttons-container">
	<button id="get-offset-height">Show Offset Height</button>
	<button id="get-client-height">Show Client Height</button>
	<button id="get-scroll-height">Show Scroll Height</button>
</div>

&varr; is the HTML code for arrow icon ↕

#main-element-outer {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

/* Element that demonstrates the various heights */
#height-container {
	position: absolute;
	width: 80px;
	left: 90px;
	height: 100px;
	background-color: #e74c3c;
	z-index: 1001;
	font-size: 100px;
	text-align: center;
	color: white;
	display: none;
}

/* Element for which heights are calculated */
#main-element {
	width: 200px;
	height: 100px;
	padding: 20px;
	border: 10px solid #2ecc71;
	overflow: auto;
}

#child-element {
	width: 400px;
	height: 200px;
	text-align: justify;
}

#buttons-container {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 40px;
}

#buttons-container button {
	display: block;
	background-color: white;
   	border: 1px solid #2980b9;
	color: #2980b9;
	cursor: pointer;
	padding: 10px;
	margin: 0 0 20px 0;
	width: 150px;
}

#buttons-container button:last-child {
	margin: 0 !important;
}

Javascript : Illustrating the offsetHeight

// Show the offsetHeight
document.querySelector("#get-offset-height").addEventListener("click", function() {
	// Offset Height includes border also so we set top to 0
	document.querySelector("#height-container").style.top = 0;
	
	// Height of the visual container = offsetHeight of the element
	document.querySelector("#height-container").style.height = document.querySelector("#main-element").offsetHeight + 'px';
	
	// Line height is set to height so that the "arrow" comes in centre 
	document.querySelector("#height-container").style.lineHeight = document.querySelector("#main-element").offsetHeight + 'px';
	
	// Show the visual container
	document.querySelector("#height-container").style.display = 'block';
	
	// Mark the visual container as being formed from offsetHeight
	document.querySelector("#height-container").setAttribute('data-type', 'OFFSET-HEIGHT');

	document.querySelector("#child-element").style.opacity = 0.4;
});

Javascript : Illustrating the clientHeight

// Show the clientHeight
document.querySelector("#get-client-height").addEventListener("click", function() {
	// Client Height does not include border also so we set top to the top border width
	document.querySelector("#height-container").style.top = getComputedStyle(document.querySelector('#main-element'),null).getPropertyValue('border-top-width');
	
	// Height of the visual container = clientHeight of the element
	document.querySelector("#height-container").style.height = document.querySelector("#main-element").clientHeight + 'px';
	document.querySelector("#height-container").style.lineHeight = document.querySelector("#main-element").clientHeight + 'px';
	document.querySelector("#height-container").style.display = 'block';
	document.querySelector("#height-container").setAttribute('data-type', 'CLIENT-HEIGHT');

	document.querySelector("#child-element").style.opacity = 0.4;
});

Javascript : Illustrating the scrollHeight

// Show the scrollHeight
document.querySelector("#get-scroll-height").addEventListener("click", function() {
	showScrollHeight();
});

// Update showing scrollHeight when element is scrolled 
document.querySelector("#main-element").addEventListener("scroll", function() {
	// Only when visual container is formed from scrollHeight
	if(document.querySelector("#height-container").getAttribute('data-type') == 'SCROLL-HEIGHT')
		showScrollHeight();
});

function showScrollHeight() {
	// scrollTop gives the height of the element above the scrollbar that is not seen 
	// scrollheight does not include the border so we must subtract the top border width
	document.querySelector("#height-container").style.top = (-document.querySelector("#main-element").scrollTop + parseInt(getComputedStyle(document.querySelector('#main-element'),null).getPropertyValue('border-top-width'), 10)) + 'px';
	
	// Height of the visual container = scrollHeight of the element
	document.querySelector("#height-container").style.height = document.querySelector("#main-element").scrollHeight + 'px';
	document.querySelector("#height-container").style.lineHeight = document.querySelector("#main-element").scrollHeight + 'px';
	document.querySelector("#height-container").style.display = 'block';
	document.querySelector("#height-container").setAttribute('data-type', 'SCROLL-HEIGHT');

	document.querySelector("#child-element").style.opacity = 0.4;
}

For people interested in the jQuery code :

$("#get-offset-height").on('click', function() {
	$("#height-container").css({ 'top': 0, 'height': $("#main-element").get(0).offsetHeight + 'px', 'line-height': $("#main-element").get(0).offsetHeight + 'px' }).show().attr('data-type', 'OFFSET-HEIGHT');
	$("#child-element").css('opacity', '0.4');
});

$("#get-client-height").on('click', function() {
	$("#height-container").css({ 'top': '10px', 'height': $("#main-element").get(0).clientHeight + 'px', 'line-height': $("#main-element").get(0).clientHeight + 'px' }).show().attr('data-type', 'CLIENT-HEIGHT');
	$("#child-element").css('opacity', '0.4');
});

$("#get-scroll-height").on('click', function() {
	showScrollHeight();
});

$("#main-element").on('scroll', function() {
	if($("#height-container").attr('data-type') == 'SCROLL-HEIGHT')
		showScrollHeight();
});

function showScrollHeight() {
	$("#height-container").css({ 'top': (-$("#main-element").get(0).scrollTop + 10) + 'px', 'height': $("#main-element").get(0).scrollHeight + 'px', 'line-height': $("#main-element").get(0).scrollHeight + 'px' }).show().attr('data-type', 'SCROLL-HEIGHT');
	$("#child-element").css('opacity', '0.4');
}