Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
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.
Advertisements
