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
How to make the web page height to fit screen height with HTML?
To make a web page height fit the screen height, you have several CSS approaches. Each method has different use cases and browser compatibility considerations.
Method 1: Using Percentage Heights
Set both html and body elements to 100% height to establish the full viewport height foundation:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.full-height {
height: 100%;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="full-height">
<h1>Full Screen Height Content</h1>
</div>
</body>
</html>
Method 2: Using Fixed Positioning
Fixed positioning stretches an element to cover the entire viewport by setting all four edges:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.fixed-fullscreen {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="fixed-fullscreen">
<h1>Fixed Full Screen</h1>
</div>
</body>
</html>
Method 3: Using Viewport Height (Recommended)
The vh unit represents 1% of the viewport height, making 100vh equal to full screen height:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.viewport-height {
height: 100vh;
background-color: lightyellow;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="viewport-height">
<h1>100vh Full Height</h1>
</div>
</body>
</html>
Comparison
| Method | Browser Support | Best For |
|---|---|---|
| Percentage Heights | All browsers | Simple layouts |
| Fixed Positioning | All browsers | Overlay content |
| Viewport Units (100vh) | Modern browsers | Responsive design |
Key Points
- Always reset
marginandpaddingonbodyto avoid unwanted spacing - Viewport units (
vh) are the most flexible for modern responsive designs - Fixed positioning removes elements from normal document flow
Conclusion
Use 100vh for modern responsive designs as it's the most reliable method. For older browser support, combine percentage heights with proper CSS resets.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements