JavaScript Screen height Property

What You’ll Learn

Screen.height is a read-only instance property that returns the full height of the screen in CSS pixels. Learn how it differs from availHeight and innerHeight, how OS chrome shrinks available space, and the classic MDN comparison—with five examples and try-it labs.

Introduction

The browser’s screen object describes the display behind your window. screen.height answers: “How tall is the whole screen, in CSS pixels?” That is the full vertical size of the monitor (or the display associated with this window)—not how tall the current tab is.

Operating systems often keep a strip for themselves (taskbar, Dock, menu bar). That is why availHeight can be smaller than height. MDN’s classic check is: if they differ, something is occupying screen real estate.

console.log(window.screen.height);

Understanding the Property

MDN: the Screen.height read-only property returns the height of the screen in CSS pixels.

• Instance — on the Screen object from window.screen.
• Read-only — you cannot assign to height.
• CSS pixels — same unit family as layout sizes (not always hardware pixels).
• Full height — may be larger than availHeight when OS chrome is reserved.

📝 Syntax

const h = window.screen.height;
// same as:
const h2 = screen.height;

Value

A number: the full screen height in CSS pixels. Compare it with window.screen.availHeight when you care about space left after OS chrome.

📈 height vs availHeight

🎨 Detect Occupied Screen Space

MDN’s teaching example: if available height differs from full height, something is occupying screen real estate.

if (window.screen.availHeight !== window.screen.height) {
  // Something is occupying some screen real estate!
  console.log("OS chrome likely reserved vertical space");
} else {
  console.log("Full height appears available");
}

Auto-hide taskbars/Docks or fullscreen mode may make the two values match even when chrome can appear later.

Examples Gallery

Examples follow MDN Screen.height. Numbers on your machine will differ by display and OS chrome.

console.log(window.screen.height);
console.log(typeof screen.height);

1080
number

if (window.screen.availHeight !== window.screen.height) {
  console.log("Something is occupying some screen real estate!");
} else {
  console.log("Full height appears available");
}

Something is occupying some screen real estate!

const reserved = screen.height - screen.availHeight;

console.log("full:", screen.height);
console.log("avail:", screen.availHeight);
console.log("reserved:", reserved);

full: 1080
avail: 1040
reserved: 40

const box = {
  width: screen.width,
  height: screen.height
};

console.log(box.width + " x " + box.height);
console.log(box.width * box.height);

1920 x 1080
2073600

console.log({
  screenHeight: screen.height,
  availHeight: screen.availHeight,
  innerHeight: window.innerHeight,
  outerHeight: window.outerHeight
});

{
  "screenHeight": 1080,
  "availHeight": 1040,
  "innerHeight": 720,
  "outerHeight": 800
}

🚀 Common Use Cases

• Logging full display resolution for diagnostics or QA.
• Detecting whether OS chrome reserves vertical space (MDN check).
• Teaching screen metrics vs viewport metrics to beginners.
• Pairing with screen.width for full screen size.
• Comparing with availHeight before sizing secondary windows.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only — do not assign to height.
• Not the same as window.innerHeight (viewport of this window).
• Related: colorDepth, availHeight, Window hub, JavaScript hub.

💡 Best Practices