Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS Max-Height . Esta clase se utiliza para establecer la altura máxima de un elemento. Si el contenido del elemento es más grande que la altura máxima especificada, el contenido se desbordará; de lo contrario, no tendrá ningún efecto. Si el contenido del elemento es más pequeño que no tiene ningún efecto. El valor de la clase de altura puede ser anulado por la clase de altura máxima .
Clases de altura máxima:
- max-h-0
- max-h-px
- max-h-full
- max-h-pantalla
Nota: Puede cambiar el número con los valores «rem» válidos.
max-h-0: Esta clase se utiliza para establecer la altura máxima específica para cualquier elemento.
Sintaxis:
<element class="max-h-0">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Max-Height Class</b> <div class="mx-48 h-24 bg-green-200 p-8"> <div class="max-h-0 bg-green-400 rounded-lg">max-h-0</div> </div> </body> </html>
Producción:
max-h-px: esta clase se usa para establecer la altura específica de 1px para cualquier elemento.
Sintaxis:
<element class="max-h-px">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Max-Height Class</b> <div class="mx-48 h-24 bg-green-200 p-8"> <div class="max-h-px bg-green-400 rounded-lg">max-h-px</div> </div> </body> </html>
Producción:
max-h-full: esta clase se utiliza para establecer la altura máxima de un elemento que está lleno, según el elemento principal.
Sintaxis:
<element class="max-h-full">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Max-Height Class</b> <div class="mx-48 h-24 bg-green-200 p-8"> <div class="h-48 max-h-full bg-green-400 rounded-lg">max-h-full</div> </div> </body> </html>
Producción:
max-h-screen: esta clase se usa para hacer que un elemento abarque toda la altura de la ventana gráfica al máximo. Para controlar la altura máxima de un elemento en un punto de interrupción específico, agregue un prefijo de «pantalla» a cualquier utilidad de altura máxima existente.
Sintaxis:
<element class="max-h-screen">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Max-Height Class</b> <div class="mx-48 h-48 bg-green-200 p-8"> <div class="max-h-screen bg-green-400 rounded-lg">max-h-screen</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA