How to fill up the rest of screen height using Tailwind CSS ?
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" > w3wiki 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: