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 height Property
The screen.height property in JavaScript returns the total height of the user's screen in pixels. This property is part of the Screen interface and provides information about the physical dimensions of the user's display device, including any system toolbars or taskbars.
Syntax
Following is the syntax for the screen height property −
screen.height
Return Value
The screen.height property returns an integer value representing the total height of the screen in pixels. This includes the entire screen area, not just the browser window.
Example
Following example demonstrates how to get and display the screen height using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>HTML Screen Height Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f8f9fa;
}
.btn {
background: #007bff;
border: none;
padding: 10px 20px;
border-radius: 4px;
color: white;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.btn:hover {
background: #0056b3;
}
.result {
font-size: 18px;
margin: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Screen Height Property Demo</h1>
<button class="btn" onclick="showScreenHeight()">Show Screen Height</button>
<div class="result" id="output"></div>
<script>
function showScreenHeight() {
var height = screen.height;
document.getElementById("output").innerHTML = "Screen Height: " + height + " pixels";
}
</script>
</body>
</html>
The output displays a button that, when clicked, shows the screen height −
Screen Height Property Demo [Show Screen Height] Screen Height: 1080 pixels
Screen Properties Comparison
Following example shows the difference between various screen-related properties −
<!DOCTYPE html>
<html>
<head>
<title>Screen Properties Comparison</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.info-box {
background: white;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn {
background: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Screen vs Window Properties</h2>
<button class="btn" onclick="showAllDimensions()">Show All Dimensions</button>
<div class="info-box">
<h3>Screen Properties</h3>
<p id="screenInfo">Click button to see screen dimensions</p>
</div>
<div class="info-box">
<h3>Window Properties</h3>
<p id="windowInfo">Click button to see window dimensions</p>
</div>
<script>
function showAllDimensions() {
// Screen properties (entire display)
var screenInfo = "Screen Height: " + screen.height + "px<br>" +
"Screen Width: " + screen.width + "px<br>" +
"Available Height: " + screen.availHeight + "px<br>" +
"Available Width: " + screen.availWidth + "px";
// Window properties (browser window)
var windowInfo = "Window Inner Height: " + window.innerHeight + "px<br>" +
"Window Inner Width: " + window.innerWidth + "px<br>" +
"Window Outer Height: " + window.outerHeight + "px<br>" +
"Window Outer Width: " + window.outerWidth + "px";
document.getElementById("screenInfo").innerHTML = screenInfo;
document.getElementById("windowInfo").innerHTML = windowInfo;
}
</script>
</body>
</html>
This example shows the relationship between screen dimensions and browser window dimensions.
Difference Between Screen Properties
Following table shows the differences between various screen-related properties −
| Property | Description | Includes System UI |
|---|---|---|
screen.height |
Total height of the entire screen | Yes |
screen.availHeight |
Available screen height (excluding taskbars) | No |
window.innerHeight |
Height of the browser's content area | No |
window.outerHeight |
Height of the entire browser window | Includes browser UI |
Common Use Cases
The screen height property is commonly used for −
Responsive Design − Adapting layouts based on screen size
Full-Screen Applications − Calculating dimensions for full-screen modes
Media Queries − Dynamic CSS adjustments based on screen dimensions
Window Positioning − Centering popup windows or dialogs
Example − Responsive Layout Based on Screen Height
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout with Screen Height</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.status {
padding: 15px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
}
.large-screen { background-color: #d4edda; color: #155724; }
.medium-screen { background-color: #fff3cd; color: #856404; }
.small-screen { background-color: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="container">
<h2>Screen Size Detection</h2>
<p>This example detects your screen height and adapts accordingly.</p>
<div id="screenStatus">Detecting screen size...</div>
<p>Screen Height: <span id="heightValue">-</span> pixels</p>
</div>
<script>
function detectScreenSize() {
var height = screen.height;
var status = document.getElementById("screenStatus");
var heightValue = document.getElementById("heightValue");
heightValue.textContent = height;
if (height >= 1080) {
status.className = "status large-screen";
status.textContent = "Large Screen Detected - Full features available";
} else if (height >= 768) {
status.className = "status medium-screen";
status.textContent = "Medium Screen Detected - Compact layout applied";
} else {
status.className = "status small-screen";
status.textContent = "Small Screen Detected - Mobile layout applied";
}
}
// Run on page load
detectScreenSize();
</script>
</body>
</html>
This example automatically detects the screen height and displays appropriate messages based on screen size categories.
Browser Compatibility
The screen.height property is widely supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the web standard since the early days of JavaScript and can be safely used in production applications.
Conclusion
The screen.height property provides the total pixel height of the user's display screen, including system UI elements like taskbars. It is essential for responsive design, full-screen applications, and adaptive layouts. Use screen.availHeight if you need the available screen area excluding system UI elements.
235 Views
