How to fill up the rest of screen height using Tailwind CSS ?

Last Updated : 26 May, 2021

In this article, we will learn how to fill up the rest of the screen height using Tailwind CSS.

Approach: To solve the above problem we’ll be using the Flex Class and Height Class of Tailwind CSS.

The classes that we’ll be using to solve this are as follows.

flex: It is used to set the length of flexible items. The flex class is much responsive and mobile-friendly.
flex-col: It is used to position flex items vertically.
h-screen: This class is used to make an element span the entire height of the viewport.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="flex flex-col h-screen"> 
        <div class="bg-yellow-500 py-8 hidden sm:block "> 
            <div class="flex space-x-4"> 
                <a href="#" class="bg-gray-900 text-white  
                        px-3 py-2 rounded-md text-sm  
                        font-medium" aria-current="page"> 
                    GeeksForGeeks Dashboard 
                </a> 
                  
                <a href="#" class="text-gray-300  
                        hover:bg-gray-700  
                        hover:text-white px-3 py-2  
                        rounded-md text-sm font-medium"> 
                    Team 
                </a> 
                  
                <a href="#" class="text-gray-300  
                        hover:bg-gray-700 
                        hover:text-white px-3 py-2  
                        rounded-md text-sm font-medium"> 
                    Projects 
                </a> 
                  
                <a href="#" class="text-gray-300  
                        hover:bg-gray-700 hover:text-white  
                        px-3 py-2 rounded-md  
                        text-sm font-medium"> 
                    Calendar 
                </a> 
            </div> 
        </div> 
          
        <div class="bg-green-500 flex flex-grow"> 
            This is the other content on screen 
        </div> 
    </div> 
</body> 
  
</html> 