¿Cómo llenar el resto de la altura de la pantalla usando Tailwind CSS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *