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
HTML Screen availHeight Property
The HTML Screen availHeight property returns the available height of the user's screen in pixels, excluding browser interface elements like toolbars, taskbars, and other operating system UI components. This property is useful for determining how much screen space is actually available for displaying content.
Syntax
Following is the syntax for the availHeight property −
screen.availHeight
Return Value
The availHeight property returns an integer representing the available height of the screen in pixels. This value is always less than or equal to the total screen height (screen.height) because it excludes areas occupied by the operating system interface.
Example − Getting Available Screen Height
Following example demonstrates how to get the available screen height using the availHeight property −
<!DOCTYPE html>
<html>
<head>
<title>Screen availHeight Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>HTML Screen availHeight Property</h1>
<button onclick="showAvailHeight()" style="padding: 10px 20px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Available Height</button>
<div id="result" style="margin-top: 20px; font-size: 18px; font-weight: bold;"></div>
<script>
function showAvailHeight() {
var availHeight = screen.availHeight;
document.getElementById("result").innerHTML = "Available Screen Height: " + availHeight + " pixels";
}
</script>
</body>
</html>
The output displays the available screen height when the button is clicked −
Available Screen Height: 1080 pixels (Note: Actual value depends on your screen resolution and OS interface)
Example − Comparing Screen Dimensions
Following example compares the total screen height with the available height to show the difference −
<!DOCTYPE html>
<html>
<head>
<title>Screen Height Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Screen Height Comparison</h2>
<button onclick="compareHeights()" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Compare Heights</button>
<div id="comparison" style="margin-top: 15px; line-height: 1.6;"></div>
<script>
function compareHeights() {
var totalHeight = screen.height;
var availHeight = screen.availHeight;
var difference = totalHeight - availHeight;
var result = "<strong>Screen Dimensions:</strong><br>";
result += "Total Screen Height: " + totalHeight + " px<br>";
result += "Available Height: " + availHeight + " px<br>";
result += "Height occupied by OS interface: " + difference + " px";
document.getElementById("comparison").innerHTML = result;
}
</script>
</body>
</html>
This example shows how much screen space is taken up by operating system elements −
Screen Dimensions: Total Screen Height: 1200 px Available Height: 1160 px Height occupied by OS interface: 40 px
Common Use Cases
The availHeight property is commonly used in the following scenarios −
Responsive Design − Determining optimal sizes for modal dialogs, popups, or full-screen applications.
Game Development − Setting canvas dimensions to maximize available screen space.
Kiosk Applications − Creating full-screen interfaces that account for system UI elements.
Video Players − Calculating maximum height for video content without overlapping system bars.
Browser Compatibility
The screen.availHeight property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the Screen interface defined in the CSSOM View Module specification.
Conclusion
The screen.availHeight property provides the usable screen height excluding operating system interface elements. This property is essential for creating responsive layouts and applications that need to maximize the available screen real estate while accounting for system UI components like taskbars and menu bars.
305 Views
