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 Window innerHeight Property
The HTML Window innerHeight property returns the height of the browser window's content area in pixels, excluding toolbars, scrollbars, and other browser UI elements. This property is commonly used in responsive web design and dynamic layout calculations.
Syntax
Following is the syntax for accessing the innerHeight property −
window.innerHeight
Return Value
The innerHeight property returns an integer representing the height of the browser window's content area in pixels. This value changes when the user resizes the browser window or when the browser's UI elements (like toolbars) are toggled.
Basic Example
Following example demonstrates how to get and display the window's inner height −
<!DOCTYPE html>
<html>
<head>
<title>Window innerHeight Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Window innerHeight Property Demo</h2>
<button onclick="showHeight()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Show Window Height</button>
<p id="result" style="font-size: 18px; color: #333; margin-top: 20px;"></p>
<script>
function showHeight() {
var height = window.innerHeight;
document.getElementById("result").innerHTML = "Window inner height: " + height + " pixels";
}
</script>
</body>
</html>
The output displays the current height of the browser's content area −
Window inner height: 720 pixels (Actual value depends on your browser window size)
Dynamic Height Detection
The innerHeight property is particularly useful for creating responsive layouts that adapt to different screen sizes and window dimensions.
Example − Responsive Container Height
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Height Container</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px;">
<h2>Dynamic Container Height</h2>
<button onclick="setFullHeight()" style="padding: 8px 16px; margin-bottom: 10px;">Set Full Height</button>
<button onclick="setHalfHeight()" style="padding: 8px 16px; margin-bottom: 10px;">Set Half Height</button>
<div id="container" style="background-color: #e3f2fd; border: 2px solid #1976d2; padding: 20px; text-align: center;">
<p>This container's height will be adjusted based on window dimensions.</p>
<p id="info"></p>
</div>
<script>
function setFullHeight() {
var container = document.getElementById("container");
var height = window.innerHeight - 150; // Account for header and buttons
container.style.height = height + "px";
document.getElementById("info").innerHTML = "Container height set to: " + height + "px";
}
function setHalfHeight() {
var container = document.getElementById("container");
var height = (window.innerHeight - 150) / 2;
container.style.height = height + "px";
document.getElementById("info").innerHTML = "Container height set to: " + height + "px";
}
</script>
</body>
</html>
Resize Event Listener
To track changes in window size, you can use the resize event listener with the innerHeight property.
Example − Real-time Height Monitoring
<!DOCTYPE html>
<html>
<head>
<title>Real-time Height Monitor</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Real-time Window Height Monitor</h2>
<p>Resize your browser window to see the height change in real-time.</p>
<div id="heightDisplay" style="background-color: #f0f0f0; padding: 15px; border-radius: 5px; font-size: 18px; font-weight: bold;"></div>
<script>
function updateHeight() {
document.getElementById("heightDisplay").innerHTML =
"Current window height: " + window.innerHeight + " pixels";
}
// Update on page load
updateHeight();
// Update whenever window is resized
window.addEventListener("resize", updateHeight);
</script>
</body>
</html>
This example continuously monitors and displays the window height as the user resizes the browser window.
Common Use Cases
The window.innerHeight property is commonly used in the following scenarios −
Full-screen layouts − Creating elements that fill the entire viewport height.
Responsive design − Adjusting content based on available screen space.
Modal dialogs − Positioning popups relative to the viewport size.
Infinite scroll − Calculating when to load more content based on scroll position and window height.
Browser Compatibility
The window.innerHeight property is widely supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It provides consistent behavior across different platforms and devices.
Conclusion
The window.innerHeight property is essential for responsive web development, providing the height of the browser's content area in pixels. It enables developers to create dynamic layouts that adapt to different screen sizes and respond to window resize events in real-time.
317 Views
