Open In App

How to force child div to be 100% of parent div’s height without specifying parent’s height?

Improve
Improve
Like Article
Like
Save
Share
Report

When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don’t want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div element’s height without specifying the parent’s height.

Approaches: There are several approaches to force a child div element to be 100% of its parent div element’s height without specifying the parent’s height. there are some common approaches

Approach 1: Using absolute positioning: One way to make the child div element fill up the height of its parent div element is by using absolute positioning. This approach requires setting the parent div element’s position to relative and the child div element’s position to absolute. Then, we can set the child div element’s top and bottom properties to 0 to make it fill up the height of the parent div element.

Syntax:

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
}

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative;
            height: 300px;
            background-color: #eee;
        }
 
        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background-color: #ccc;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>


Output:

with the help of absolute position

Approach 2: Using Flexbox: Another approach to make the child div element fill up the height of its parent div element is by using Flexbox. This approach requires setting the parent div element’s display property to flex and the child div element’s height property to 100%.

Syntax:

.parent {
    display: flex;
}

.child {
    height: 100%;
}

Example: In this example, we will use Flexbox to make the child div element fill up the height of its parent div element. Here’s the HTML structure

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .parent {
            display: flex;
            height: 300px;
            background-color: #eee;
        }
 
        .child {
            height: 100%;
            width: 100%;
            background-color: #ccc;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>


Output:

by using display flex property

Approach 3: Using Grid A third approach to make the child div element fill up the height of its parent div element is by using Grid. This approach requires setting the parent div element’s display property to the grid and the child div element’s height property to 100%.

Syntax:

.parent {
    display: grid;
}

.child {
    height: 100%;
}

Example: In this example, we will use Grid to make the child div element fill up the height of its parent div element. Here’s the HTML structure:

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            display: grid;
            height: 300px;
            background-color: #eee;
        }
 
        .child {
            height: 100%;
            background-color: #ccc;
        }
    </style>
</head>
 
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>



by using grid property

We set the display property of the parent div element to the grid to create a Grid container. Then, we set the height property of the parent div element to 300 pixels and the height property of the child div element to 100% to make it fill up the height of the parent element. 

Conclusion: In conclusion, there are several approaches to making a child div element fill up the height of its parent div element without specifying the parent’s height. You can use absolute positioning, Flexbox, or Grid to achieve this. Choose the approach that best fits your design needs and coding preferences.



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads