JavaScript Screen availHeight Property

What You’ll Learn

Screen.availHeight is a read-only instance property that returns how tall (in CSS pixels) the space available for web content is on the screen. Learn how it differs from screen.height, why taskbars and Docks matter, and how it pairs with availWidth—with five examples and try-it labs.

Introduction

Every browser window has a screen object describing the display. The full screen height is screen.height. But operating systems often keep a strip for themselves—Windows taskbar, macOS menu bar and Dock, and similar chrome.

availHeight answers: “How many CSS pixels of vertical space can web content reasonably use?” You read it as window.screen.availHeight.

console.log(window.screen.availHeight);

Understanding the Property

MDN: the read-only Screen interface’s availHeight property returns the height, in CSS pixels, of the space available for web content on the screen.

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

📝 Syntax

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

Value

A number: CSS pixels of available vertical space. It can be no larger than window.screen.height, and will be less if the device or user agent reserves vertical space for itself.

📈 height vs availHeight

🎨 Sizing Secondary Windows

MDN’s classic use case: open a tool palette and stretch it to the full available vertical space. The idea looks like this (popup blockers and browser policies may limit real resizing in some environments):

// Main window: open a small palette
const paletteWindow = window.open(
  "panels.html",
  "Panels",
  "left=0, top=0, width=200"
);

// Inside panels.html (after open), MDN-style idea:
// window.outerHeight = window.screen.availHeight;

Prefer reading availHeight for planning sizes. Assigning outerHeight is restricted in many modern browsers unless the script opened the window itself and policies allow it.

Examples Gallery

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

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

1040
number

const { height, availHeight } = window.screen;

console.log(height);
console.log(availHeight);
console.log(availHeight <= height);

1080
1040
true

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.availWidth,
  height: screen.availHeight
};

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

1920 x 1040
1996800

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

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

🚀 Common Use Cases

• Planning max height for a secondary tool window or palette.
• Logging display metrics in diagnostics or QA tools.
• Estimating how much vertical OS chrome is reserved.
• Teaching screen metrics vs viewport metrics to beginners.
• Pairing with availWidth for available screen area.

🔧 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 availHeight.
• Not the same as window.innerHeight (viewport of this window).
• Related: splitText(), Window hub, window.open(), JavaScript hub.

💡 Best Practices