How to make div fill full height of parent in Tailwind CSS ?

Last Updated : 26 Apr, 2023

Tailwind CSS is a utility-first CSS framework that provides various pre-designed classes for easy and efficient styling of HTML elements. Sometimes, we may encounter a scenario where we need to make a div fill the full height of its parent element. In such a case, we can use Tailwind CSS classes to achieve this goal. To make a div fill the full height of its parent using Tailwind CSS, we can use the h-full class or flex-1 class, which sets the height of the div to 100% of its parent’s height.

Approach 1: Using the “h-full” class

The first approach to making a div fill the full height of its parent element in Tailwind CSS is by using the h-full class. This class sets the height of an element to be 100% of its parent element’s height. However, we also need to ensure that the parent element has a specified height value, or else the child element with the h-full class will not be able to fill the full height of its parent.

To use this approach, we need to follow these steps:

Ensure that the parent element has a specified height value.
Add the h-full class to the child element that needs to fill the full height of its parent.

Syntax:

<div class="h-full"></div>

Example: In this example, we have a parent div with a height of 64 pixels and a child div that needs to fill the full height of its parent. We added the “h-full” class to the child div to make it take up the full height of the parent, and we also used the “bg-gray-300” and “bg-blue-500” classes to set the background colors of the parent and child div elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body> 
    <div align="center"> 
        <h1 class="text-green-600  
                   text-5xl mb-4 font-bold"> 
            GeeksforGeeks 
        </h1> 
        <b>Using the "h-full" class</b> 
        <div class="parent h-64 bg-gray-300 mt-4 w-1/2"> 
            <div class="child h-full bg-blue-500 w-3/4"></div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: Using Flexbox

The second approach to make a div fill the full height of its parent element in Tailwind CSS is by using the “flex-1” class. This class applies a flexbox layout to the parent element and sets the child element to take up all remaining space in the container. In other words, the “flex-1” class assigns a “flex-grow” value of 1 to the child element, which makes it expand to fill the remaining available space in the container.

To use Flexbox to make a div fill the full height of its parent, we can follow these steps:

Set the display property of the parent element to flex using the “flex” class.
Set the flex-direction of the parent element to the column using the “flex-col” class.
Add the “flex-1” class to the child element that needs to fill the full height of its parent.

Syntax:

<div class=" parent flex flex-col">
    <div class="child flex-1"></div>
</div>

Example: In the code example, we used Flexbox to make a child div fill the full height of its parent div. We applied the “flex” and “flex-col” classes to the parent div to enable a column-oriented Flexbox layout. Then, we used the “flex-1” class on the child div to make it fill the remaining vertical space. We also used the “bg-gray-300” and “bg-blue-500” classes to set the background colors of the parent and child divs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
    <title> 
        Using Flexbox to fill full height 
    </title> 
</head> 
  
<body> 
    <div align="center"> 
        <h1 class="text-green-600  
                   text-5xl  
                   mb-4 font-bold"> 
            GeeksforGeeks 
        </h1> 
        <b>Using Flexbox to fill full height</b> 
        <div class="parent flex flex-col  
                    h-64 bg-gray-300 
                    mt-4 w-1/2"> 
            <div class="child flex-1 h-full  
                        mx-auto bg-blue-500 w-3/4"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>