Skip to content
Related Articles

Related Articles

Improve Article

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :