JavaScript Element clientHeight Property

What You’ll Learn

Element.clientHeight is a read-only instance property that returns an element’s inner height in pixels. Learn what padding and scrollbars do to the value, how the root element reports viewport height, and how it compares to offsetHeight / scrollHeight—with five examples and try-it labs.

Introduction

Layout work often needs the visible content box height: how tall is the area inside the borders? That is what clientHeight answers.

It includes padding, but leaves out borders, margins, and any horizontal scrollbar. For elements with no CSS/inline layout box, the value is 0.

const box = document.getElementById("box");
console.log(box.clientHeight); // inner height in pixels

Understanding the Property

MDN: the clientHeight read-only property of the Element interface is zero for elements with no CSS or inline layout boxes; otherwise, it is the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present).

• Read-only — change CSS/layout, then read again.
• Integer pixels — rounded layout measurement.
• Formula — CSS height + padding − horizontal scrollbar height.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

clientHeight

Value

An integer: the element’s inner height in pixels.

📋 Measuring a Box

Give an element a fixed height and padding, then read clientHeight:

<div id="box" style="height:100px;padding:10px;border:5px solid #333;">
  Hello
</div>

const box = document.getElementById("box");
console.log(box.clientHeight);
// height 100 + padding-top 10 + padding-bottom 10 = 120
// border is NOT included

Related learning: clientWidth, offsetHeight, scrollHeight, and getBoundingClientRect().

Examples Gallery

Examples follow MDN Element: clientHeight. Labs use a styled box so the pixel measurements are easy to predict.

const box = document.getElementById("box");
console.log(box.clientHeight);

100

const box = document.getElementById("box");
// style: height:100px; padding:10px; border:5px solid
console.log(box.clientHeight); // 120 (100 + 10 + 10)

120

const box = document.getElementById("box");
console.log({
  clientHeight: box.clientHeight,
  offsetHeight: box.offsetHeight,
  scrollHeight: box.scrollHeight
});

{
  "clientHeight": 120,
  "offsetHeight": 130,
  "scrollHeight": 120
}

console.log(document.documentElement.clientHeight);

768

console.log({
  supported: "clientHeight" in Element.prototype,
  includes: "content height + padding",
  tip: "Use offsetHeight for borders; scrollHeight for overflow content",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "includes": "content height + padding",
  "tip": "Use offsetHeight for borders; scrollHeight for overflow content",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Measuring the visible height of panels, cards, and containers.
• Detecting whether content overflows (scrollHeight > clientHeight).
• Sizing overlays or sticky footers against the viewport.
• Responsive logic that depends on available client area.
• Debugging layout differences between padding and borders.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — change styles/layout to change the value.
• Returns 0 when the element has no CSS or inline layout box.
• Related: className, clientLeft, EventTarget, JavaScript hub.

💡 Best Practices