Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div> spans the entire browser window. Adjust as per your design preferences.

Unit Description
vh Adjusts the element’s size relative to the viewport’s height.
% Sets the size relative to the parent container’s size, expressed as a percentage.

Using ‘vh’ unit

To make a <div> occupy 100% height of its parent container in CSS, set height: 100%;. This percentage-based approach ensures the <div> adjusts dynamically based on the parent’s height.

Syntax:

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

height : 100 vh ;

Example 1: Implementation to show how to give a div tag 100% height.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Make div 100% of height</title>
    <style>
        #geeks {
            height: 100vh;
            width: 100vw;
            font-size: 20px;
            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%

Using ‘ % ‘ unit

In this html and body tags are set to height: 100% to ensure that the entire browser window is taken up by the div tag. The div tag height class is applied to the div tag and also set to height: 100% to make it fill the entire height of the browser window.

Syntax:

.height {
height: 100%;
}

Example 2:  To give a div tag 100% height of the browser window we can also use % unit.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>div tag 100% height </title>
    <style>
        body {
            height: 100%;
        }
 
        * {
            margin: 0;
            padding: 0;
            background-color: rgb(15, 75, 33);
        }
 
        .height {
            line-height: 30px;
            height: 100%;
            text-align: center;
            color: rgb(255, 255, 255);
        }
    </style>
</head>
 
<body>
    <div class="height">
        <h1> GeeksforGeeks !</h1> <br>
        <h2>
            Give a div tag 100% height of the browser window
        </h2>
        <h2> Learn Data Structure & Algorithm </h2>
    </div>
</body>
 
</html>


Output: 



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads