Home » CSS

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

Setting Div Height in CSS: Here, we are going to learn how to set height of div to 100% height of window using CSS?
Submitted by Anjali Singh, on February 08, 2020

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.

Definition and 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.

Solution:

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.

Property:

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:

Output

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 Tutorial & Examples »

---