Answer: You can use the vh(viewport height) to make the div 100% height of the browser window.
CSS(cascading style sheet) is used to style the webpage. Using a div with 100% height allows for greater flexibility in design and ensures your webpage looks and functions well across different devices. There are a few more methods to make a div 100% height such as using percentage height and flex-box layout. We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Make a Div 100% Height of the Browser Window
CSS properties are used to make a div 100% height of the browser window. Here are some of the properties that you can use to make a div 100% height.
Method 1: Using vh(viewport height) in CSS
The vh(viewport height) is the unit of measurement that represents the percentage of height in the browser. Eg: 1vh equals 1 percentage of height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using vh</title>
<style>
.full-height {
width: 100%; /* Take full width of the browser */
height: 100vh; /* Take full height of the viewport */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% of the viewport height using vh</h1>
</div>
</body>
</html>
Output:
Explanation: The div takes the entire height of the browser window using the vh(viewport height) and the webpage is styled using CSS property.
Method 2: Using %(percentage) Height in CSS
Percentage height works based on the height of the parent element. The parent element has a defined height and the child element takes a percentage height of it.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using %</title>
<style>
html, body {
height: 100%;
}
.full-height {
height: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% height using percentage</h1>
</div>
</body>
</html>
Output:
Explanation: The percentage height is used to make the div 100% height of the browser window.
Method 3: Using Flex-box Layout in CSS
This model is used to create a dynamic and flexible layout. The div is created for the height of the browser window using a flex-box layout.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using Flexbox</title>
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.full-height {
flex: 1;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% of the viewport height using Flexbox</h1>
</div>
</body>
</html>
Output:
Explanation: The div is created to the entire height of the browser window. The body elements are set to 100% height and use Flex-box in the column direction.
Method 4: Using position: absolute and top, bottom in CSS
The position: absolute positions the div to the full height respective to their ancestor. And top:0 and bottom:0 stretch the div from top to bottom.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using Absolute Positioning</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.full-height {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% height using absolute positioning</h1>
</div>
</body>
</html>
Output:
Explanation: The div is absolutely positioned from top to bottom, which takes the full height of the browser window.
Method 5: Using Grid Layout in CSS
This model is used to create a complex layout where it requires control over both columns and rows. It allows you to make an element that takes 100% of the viewport height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using CSS Grid</title>
<style>
html, body {
height: 100%;
margin: 0;
display: grid;
grid-template-rows: 1fr;
}
.full-height {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% height using CSS Grid</h1>
</div>
</body>
</html>
Output:
Explanation: The div created in this code takes the entire height of the browser window and the div fills spaces with light-blue color.
Method 6: Using calc() Function in CSS
This function is used to calculate the value of properties. You can use the calc() function to calculate the div’s height based on the viewport height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div with 100% Height using calc()</title>
<style>
html, body {
height: 100%;
margin: 0;
}
.full-height {
height: calc(100vh); /* Using calc to set the height */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="full-height">
<h1>This div takes 100% height using calc()</h1>
</div>
</body>
</html>
Output:
Explanation: The calc() function with 100vh is used to take the full height of the browser window.
Conclusion
The above-mentioned techniques are used to make a div 100% height of the browser window. The vh units, percentage heights, Flexbox, Grid layout, absolute positioning, or the calc() function. Each method adapts the div to fit the viewport height.