Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
        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>

                    

Output:



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