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
How to give a div tag 100_ height of the browser window using CSS?
When working on web development projects, there are often scenarios where you need to give a div tag the full height of the browser window. This can be particularly useful when creating full-page layouts, hero sections, or elements that need to span the entire vertical space.
However, achieving this desired effect using CSS can be a bit tricky due to the nature of the CSS Box Model and the default behavior of height properties.
Syntax
/* Method 1: Using percentage height */
selector {
height: 100%;
}
/* Method 2: Using viewport height */
selector {
height: 100vh;
}
Method 1: Using Height 100%
One approach to giving a div tag 100% height is by using the height: 100% property. However, this approach requires that all parent elements also have a height of 100% for it to work correctly.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
.content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
Content takes full viewport height
</div>
</div>
</body>
</html>
A light blue container spanning the full height of the browser window with centered white content box appears on the page.
Method 2: Using Viewport Height (100vh)
The 100vh unit represents 100% of the viewport height and provides a more straightforward solution without requiring parent element height settings
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
.content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
100vh height container
</div>
</div>
</body>
</html>
A light green container spanning the full viewport height with centered white content box appears on the page.
Method 3: Using Flexbox
Flexbox provides a flexible way to create full-height containers with better content distribution control
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: lightyellow;
}
.header {
flex: 0 0 auto;
padding: 20px;
background-color: #333;
color: white;
text-align: center;
}
.content {
flex: 1;
background-color: white;
margin: 20px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">
Flexible content area
</div>
</div>
</body>
</html>
A full-height layout with a fixed dark header and a flexible white content area that takes up the remaining space appears on the page.
Method 4: Using CSS Grid
CSS Grid offers another approach for creating full-height layouts with precise control over row sizing
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 1fr;
height: 100vh;
background-color: lightcoral;
padding: 20px;
box-sizing: border-box;
}
.content {
background-color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
Grid-based full height
</div>
</div>
</body>
</html>
A light coral container with padding spanning the full viewport height containing a centered white content area appears on the page.
Key Considerations
Viewport Units
100vhis generally preferred overheight: 100%for simplicityContent Overflow Add
overflow: autoif content might exceed the viewport heightMobile Considerations On mobile devices,
100vhmay include the address bar area
Conclusion
Creating full-height div elements can be achieved through multiple CSS techniques. The 100vh approach is generally the most straightforward, while Flexbox and Grid offer more layout flexibility. Choose the method that best fits your specific layout requirements and browser support needs.
401 Views
