In this blog, we will learn how to set an element’s height equal to the window height in CSS. In CSS, we use its height property to perform this task. We select the height of an element which we want to make equal to the window height and give it a value of 100vh. We will do so because 1vh represents 1% height of the window in which you are working whereas vh stands for viewport height i.e. visible area of the browser window on which the user is performing his/her task.
Example1 – Single element inside body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element-Windows Height</title>
<style>
body{
background-color: rgb(141, 35, 241);
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
color: white;
margin:0;
padding:0;
}
.element{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(52, 225, 49);
}
</style>
</head>
<body>
<div class="element">
Hope this helps you.
Thank You for visiting.
</div>
</body>
</html>
Let us discuss the above code, in this, our element is div whose height we want to make equal to the window’s height, so we set its height equal to 100v. Also, focus on the CSS syntax for the body, in that we assign margin and padding as zero so that it will not take any space if any element is defined inside it with a height of 100vh. Now let’s see the output of the above html code.
In the output, we can see that the background colour appears to be green, which is assigned to the div having class name element i.e. the whole window screen belongs to the div element.
Example2- Parent and child element inside body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element-Windows Height</title>
<style>
body{
background-color: rgb(141, 35, 241);
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
color: white;
margin:0;
padding:0;
}
.element{
height: 100vh;
background-image: rgb(52, 225, 49);
}
.child_element{
background-color: rgb(252, 17, 190);
height:100%;
font-size: 10vh;
}
</style>
</head>
<body>
<div class="element">
<div class="child_element">
Hope this helps you.
Thank You for visiting.
</div>
</div>
</body>
</html>
In the above code, we give parent div with class name as element, height equals to 100vh and assign child div with class name as child_element as 100% in order to cover whole window screen. This code will give us the only child div’s content as output.
Note: You can replace height element from parent div and replace height’s value of child div from 100% to 100vh and the result will be same.
.element{
background-image: rgb(52, 225, 49);
}
.child_element{
background-color: rgb(252, 17, 190);
height:100vh;
font-size: 10vh;
}
In the output, shade of pink colour is displayed along with the text written in child div in the full window screen.Now let’s see the output of the above code