How to give a div tag 100% height of the browser window using CSS

CSS allows to adjust the height of an element using the height property. While there are several units to specify the height of an element. The vh is a relative unit that is commonly used.

vh: It stands for viewport-height. The viewport refers to the browser window size. Thus when use vh as a unit, the element’s height is adjusted relative to the browser window (viewport’s) height.
vw: It stands for viewport-width. It is used to set the browser width 100% relative to the browser window (viewport’s) width.

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS:



height:100vh;

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <title>Make div 100% of height</title>
        <style>
            #geeks {
                height: 100vh;
                width: 100vw;
                font-size: 20px;
                font-family: Times;
                padding-top: 250px;                 
                margin: 0px;         
                background-color: green;
                text-align: center;
                color:white;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div id="geeks">
        <div class = "gfg">GeeksforGeeks</div>
        <div>A computer science portal for geeks</div>
        </div>
    </body>
</html>                    

chevron_right


Output:
div 100%



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.