How to Set height of div to 100% height of window using CSS?

CSS | Setting Div Height: In this tutorial, we will learn how to set the height of the div to 100% height of the window using CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

Hello there developers! Well, certainly if you are reading this article then that means that you have run into some trouble while creating your web page or website and if you are a beginner in this field, then there is no better place than this. So let us get started without further adieu. But before we can proceed forward with this article it is crucial to know that what are divs and what could be their possible uses.

Well, divs are something that we deal with regularly while developing a web page or website, the divs are used to group lines of texts or elements and anything similar, besides divs are also used to structure the code, so that various sections remain segregated from each other. Although you can make use of section tag both of them behave pretty similarly. Besides divs also help in declaring class and ids of the various elements. Therefore, in a nutshell, it would be right to say that divs are very essential when we are developing a website or web page and divs also help in keeping our code structured.

Setting height of div to 100% height of window using CSS

We have already seen by now how to set the height of the div elements using CSS height property? Now the question arises what if we want to set the height of the div 100% height of the window? here comes the answer to the solution that is using the vh property in CSS. We will discuss the vh property in detail in this article.

CSS property to set height of div to 100% height of window

Here, "vh" stands for "viewport-height", and the word viewport refers to the user's browser windows size. So whenever we use the vh property, the element's height is adjusted relative to the height of the viewport.

To set the height of div element to 100% height of the window, we can use the following syntax,

Syntax

element{
    height:100vh;
}

Example

<!DOCTYPE html> 
<html>
  <head>
    <style type="text/css"> 
      .div1{ 
      height: 100vh; 
      padding-top: 2px;				 
      background-color: #f40; 
      text-align: center; 
      color:#ccc; 
      } 
      .div2 { 
      font-size:50px; 
      font-weight:bold; 
      } 
    </style>
  </head>
  
  <body>
    <div class="div1">
      <div class ="div2">IncludeHelp</div>
    </div>
  </body>
</html>

Output

How to Set height of div to 100% height of window using CSS?

Conclusion

In the above example, it can be seen that by making use of the viewport-height property the height of the div element is 100% height of the window. Therefore, now you know both how to increase the height of the element as well as how to make it equivalent to 100% height of the window.

This method proves to be very helpful, so just keep in mind that all you gotta do is make use of "vh" property and there you got it!

CSS Examples »

Set Divs not larger than its contents using CSS

Set the opacity only to background color and not on text using CSS