JavaScript Screen height Property

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

Definition

Screen.height is a read-only property that returns the full height of the screen in CSS pixels (MDN). Access it as window.screen.height.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use screen.height. Start with this line.

JavaScript
window.screen.height
CallWhat it does
window.screen.heightPrimary signature.

Built into the browser. Read screen.height on window.screen — no import required.

Library declarations
JavaScript
window.screen.height

Parameters

ParameterDescription
heightRequired. Read-only number — full height in CSS px
ComparisonOptional. Use availHeight / innerHeight for context

Return Value

Return ValueDescription
*The current value of screen.height.

JavaScript Examples

Example 1 — Read screen.height

Log the full screen height and confirm it is a number.

JavaScript
console.log(window.screen.height);
console.log(typeof screen.height);
Try It Yourself

How It Works

  1. Get the Screen object. window.screen describes the display for this window.
  2. Read the property. height is the full vertical size in CSS pixels.
  3. Check the type. typeof screen.height is "number".
  4. Your value differs. Resolution and OS scaling change the number you see.

Example 2 — MDN Occupied-Space Check

Compare full height with available height — MDN’s teaching pattern.

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

How It Works

  1. Read both values. height is full; availHeight is usable space.
  2. Compare with !==. A mismatch usually means visible OS chrome.
  3. Log a clear message. Same idea as the MDN example on Screen.height.
  4. Edge case. Auto-hide Dock/taskbar or fullscreen can make them match.

Example 3 — Screen Height vs Window Viewport

Do not mix up monitor height with this tab’s viewport height.

JavaScript
console.log({
  screenHeight: screen.height,
  availHeight: screen.availHeight,
  innerHeight: window.innerHeight
});
Try It Yourself

How It Works

  1. Screen metrics. height / availHeight describe the display.
  2. Window metric. innerHeight is the layout viewport of this tab.
  3. Resize the browser. Only innerHeight changes; screen values stay put.
  4. Rule of thumb. Layout → innerHeight; display size → screen.height.
Compatibility

Browser Support

Screen.height is Baseline Widely available (MDN: since July 2015). It works in all modern desktop and mobile browsers.

✓ Baseline · Widely available

Screen.height

Full screen height in CSS pixels — supported everywhere you teach modern JavaScript.

98% 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
screen.height Excellent

Bottom line: Safe for production. Use height for full display height; availHeight for usable vertical space; innerHeight for this window’s viewport.

Frequently Asked Questions

A read-only number: the full height of the screen in CSS pixels. Access it as window.screen.height or screen.height.
No. MDN marks it as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
screen.height is the full screen height. availHeight is the space available for web content and is never larger—often smaller when a taskbar, Dock, or menu bar stays visible.
No. height is the monitor’s full height. innerHeight is this browser window’s viewport height and changes when you resize the tab.
No. It is read-only. You read the value; assigning to it has no effect for web content sizing.
Use screen.width for the full screen width in CSS pixels—the horizontal twin of height.

Next: isExtended

Learn the Screen boolean that hints at a multi-monitor setup.

isExtended 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 Screen colorDepth Property JavaScript Screen isExtended Property