Свойство clientHeight содержит высоту элемента внутри границ вместе с padding, но без border и прокрутки).

См. также свойство clientWidth, которое содержит ширину элемента внутри границ.

Синтаксис

элемент.clientHeight

Примеры

Пример

Посмотрим, чему равно clientHeight:

#elem {
	height: 100px;
	border: 10px solid;
	padding: 15px;
}
<div id="elem"></div>
var elem = document.getElementById('elem');
document.write(elem.clientHeight);

Результат выполнения кода:

130

В данном примере clientHeight = padding-top + height + padding-bottom = 15 + 100 + 15 = 130.

Пример

Если у элемента появляется прокрутка то высота содержимого уменьшается на высоту прокрутки (около 16px - зависит от браузера, ОС, устройства):

#elem {
	height: 100px;
	border: 10px solid;
	padding: 15px;
	width: 20px;
	overflow: auto;
}
<div id="elem">У этого элемента есть прокрутка.</div>
var elem = document.getElementById('elem');
document.write(elem.clientHeight);

Результат выполнения кода:

113

В этом случае clientHeight = padding-top + height + padding-bottom - scrollbar.

Пример

Если элемент скрытый, то clientHeight равно 0:

#elem {
	height: 100px;
	display: none;
}
<div id="elem">Элемент</div>
var elem = document.getElementById('elem');
document.write(elem.clientHeight);

Результат выполнения кода:

0