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: