Tutorialspoint.dev

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:

<!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>                    

Output:
div 100%



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter