Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 17 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

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%

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!