JavaScript Element clientHeight Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CLIENTHEIGHT

Definition

Element.clientHeight is a read-only integer: the element’s inner height in CSS pixels. It includes padding and excludes borders, margins, and horizontal scrollbars (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.clientHeight. Start with this line.

JavaScript
element.clientHeight
CallWhat it does
element.clientHeightPrimary signature.

Built into the browser. Read or assign el.clientHeight — no import required.

Library declarations
JavaScript
element.clientHeight

Parameters

ParameterDescription
Compare propertyOptional. offsetHeight / scrollHeight for other questions

Return Value

Return ValueDescription
*Integer (CSS pixels)

JavaScript Examples

Example 1 — Read clientHeight

Measure a fixed-height box with no padding.

JavaScript
const box = document.getElementById("box");
// height: 100px; border: 5px; padding: 0; box-sizing: content-box

console.log(box.clientHeight);  // 100
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the element.
  2. Read the property. clientHeight is the inner height in CSS pixels.
  3. Ignore the border. A 5px border does not change clientHeight.
  4. Result. With height 100 and no padding → 100.

Example 2 — Padding Is Included

Add vertical padding and watch the measurement grow.

JavaScript
const box = document.getElementById("box");
// height: 100px; padding: 10px; border: 5px; box-sizing: content-box

console.log(box.clientHeight);  // 120  (100 + 10 + 10)
Try It Yourself

How It Works

  1. Start from content height. CSS height is 100px.
  2. Add padding. Top and bottom padding each add 10.
  3. Skip the border. Borders are outside the client area for this property.
  4. Total. 100 + 10 + 10 = 120.

Example 3 — vs offsetHeight and scrollHeight

Compare the three common height measurements on one element.

JavaScript
const box = document.getElementById("box");
// height: 100px; padding: 10px; border: 5px; content-box

console.log(box.clientHeight);   // 120  (content + padding)
console.log(box.offsetHeight);   // 130  (+ borders)
console.log(box.scrollHeight);   // ≥ 120 (grows if content overflows)
Try It Yourself

How It Works

  1. Client area. clientHeight = content + padding → 120.
  2. Border box. offsetHeight usually adds top/bottom borders → 130.
  3. Scrollable size. scrollHeight matches when content fits; grows on overflow.
  4. Pick by question. Visible inner height → clientHeight; full border box → offsetHeight.
Compatibility

Browser Support

Element.clientHeight is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.clientHeight

Read-only inner height in CSS pixels — long-standing CSSOM View support.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
clientHeight Excellent

Bottom line: Safe for production. Remember root-element reads return viewport height, and elements without a layout box return 0.

Frequently Asked Questions

A read-only integer: the element's inner height in CSS pixels, including padding but excluding borders, margins, and horizontal scrollbars (if present).
No. MDN marks Element.clientHeight as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It is read-only. Change layout with CSS (or element.style), then read clientHeight again.
MDN: roughly CSS height + CSS padding − height of a horizontal scrollbar if one is present. Elements with no CSS/inline layout boxes return 0.
On the root <html> element (or <body> in quirks mode), clientHeight returns the viewport height excluding any scrollbar.
offsetHeight is the border-box height (includes borders, and often scrollbars). scrollHeight is the full scrollable content height, which can be larger than the visible client area.

Next: clientLeft

Learn how to read the width of an element’s left border.

clientLeft tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element className Property JavaScript Element clientLeft Property