En este artículo, aprenderemos cómo llenar el resto de la altura de la pantalla usando Tailwind CSS .
Enfoque: para resolver el problema anterior, usaremos Flex Class y Height Class de Tailwind CSS.
Las clases que usaremos para resolver esto son las siguientes.
- flex: Se utiliza para establecer la longitud de los elementos flexibles. La clase flexible es mucho más receptiva y compatible con dispositivos móviles.
- flex-col: Se utiliza para posicionar elementos flexibles verticalmente.
- h-screen: esta clase se usa para hacer que un elemento abarque toda la altura de la ventana gráfica.
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por rakshithacharya1030 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA