screen.availHeight is a read-only number: the height, in CSS pixels, of the space available for web content on the screen (MDN). Read it as window.screen.availHeight.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use screen.availHeight. Start with this line.
window.screen.availHeight| Call | What it does |
|---|---|
window.screen.availHeight | Primary signature. |
Built into the browser. Read screen.availHeight on window.screen — no import required.
window.screen.availHeightThis member has no parameters beyond those shown in the signature.
| Return Value | Description |
|---|---|
| * | Number (CSS pixels) |
availHeightLog the available screen height in CSS pixels.
console.log(window.screen.availHeight);
console.log(typeof screen.availHeight);window.screen. Every window exposes a Screen object.availHeight. MDN: height in CSS pixels available for web content.typeof. It is always a number in browsers that support Screen.heightCompare available height with full screen height and estimate reserved space.
const height = screen.height;
const avail = screen.availHeight;
const reserved = height - avail;
console.log(height);
console.log(avail);
console.log(avail <= height);
console.log(reserved);avail <= height. Available space cannot exceed the full screen.availHeight (MDN).availWidthReport the available screen box MDN pairs with availHeight.
const box = {
width: screen.availWidth,
height: screen.availHeight
};
console.log(box.width + " x " + box.height);
console.log(box.width * box.height);availWidth. Horizontal twin of availHeight (MDN).availHeight. Vertical available space.Screen.availHeight is Baseline Widely available across modern browsers (MDN: since July 2015).
Supported in Chrome, Firefox, Safari, Edge, and Opera. Read-only CSS-pixel available height via window.screen.
Bottom line: Safe to read in modern browsers. See the MDN Screen.availHeight reference.
Learn the horizontal twin — available screen width in CSS pixels.
14 people found this page helpful