What is availHeight property in JavaScript?

The screen.availHeight property returns the available height of the user's screen in pixels, excluding areas occupied by the taskbar, dock, or other system interfaces.

Syntax

screen.availHeight

Return Value

Returns a number representing the available screen height in pixels, excluding system UI elements like taskbars.

Example

Here's how to use the screen.availHeight property to get the available screen height:

<!DOCTYPE html>
<html>
<body>
    <h2>Screen Available Height</h2>
    <p id="result"></p>
    
    <script>
        let availableHeight = screen.availHeight;
        document.getElementById("result").innerHTML = "Available height of the screen: " + availableHeight + " pixels";
        
        // Compare with total screen height
        console.log("Available height:", screen.availHeight);
        console.log("Total screen height:", screen.height);
        console.log("Difference (taskbar area):", screen.height - screen.availHeight);
    </script>
</body>
</html>
Available height of the screen: 1040 pixels
Available height: 1040
Total screen height: 1080
Difference (taskbar area): 40

Key Points

  • Excludes system UI: Unlike screen.height, this property excludes taskbars and system docks
  • Read-only: This property cannot be modified
  • Dynamic: The value can change if users resize system toolbars
  • Cross-platform: Works on Windows, macOS, and Linux browsers

Common Use Cases

  • Calculating optimal window sizes for popup windows
  • Creating full-screen applications that respect system UI
  • Responsive design calculations based on available screen space

Conclusion

The screen.availHeight property provides the usable screen height excluding system interfaces. Use it when you need to position elements or size windows within the available screen space.

Updated on: 2026-03-15T23:18:59+05:30

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements