Altura mínima do vento de cauda

Neste artigo, discutiremos a propriedade de altura mínima do Tailwind , como ela funciona e como pode ser usada para criar designs da Web impressionantes com exemplos.

Altura mínima do vento de cauda



Qual é a altura mínima do vento de cauda?

Tailwind min height é uma propriedade CSS que define a altura mínima de um elemento.

É usado para garantir que um elemento não seja menor que uma altura especificada, mesmo que não haja conteúdo dentro dele.

Essa propriedade é particularmente útil ao criar designs responsivos, pois garante que os elementos mantenham um determinado tamanho, independentemente do tamanho da tela.

Se você deseja garantir que um contêiner tenha sempre uma certa altura, pode usar a classe min-h no Tailwind.

Sintaxe

<element class="min-h-0">...</element>

Classes de altura mínima do vento de cauda

Aulas Visão geral
min-h-0 Um elemento com esta classe tem uma altura mínima de 0.
min-h-cheio Como resultado dessa classe, a altura mínima de um elemento HTML é igual à altura total de seu elemento pai.
min-h-screen Os elementos com esta classe têm uma altura mínima igual à altura total da tela.
min-h-min Usando esta classe, a altura mínima é definida para um valor que atenda ao conteúdo mínimo.
min-h-max A altura mínima é especificada para um valor que atenda ao conteúdo máximo.
min-h-fit A altura mínima é definida de forma que caiba no conteúdo.

O exemplo abaixo fornece uma visão geral prática das classes utilitárias min-h-0 , min-h-full e min-h-screen no Tailwind:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Min Height class in Tailwind CSS</p>
<div class="flex h-72 justify-evenly items-start bg-gray-200 p-4 rounded">
<div class="min-h-0 bg-gray-400
rounded-lg p-1">min-h-0</div>
<div class="min-h-full bg-gray-400
rounded-lg p-1">min-h-full</div>
<div class="min-h-screen bg-gray-400
rounded-lg p-1">min-h-screen</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Além disso, o exemplo abaixo demonstra as classes utilitárias min-h-min , min-h-max e min-h-fit no Tailwind:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Min Height class in Tailwind CSS</p>
<div class="flex items-start justify-evenly gap-2 h-24 bg-gray-200 p-4 rounded">
<div class="min-h-min bg-gray-400
rounded-lg p-1">min-h-min fafas sadasd dfdsf dsfds</div>
<div class="min-h-max bg-gray-400
rounded-lg p-1">min-h-max lklds kfdls sdfsfd dffs dfsdfdsfd dffdfd fdfds dsfsd sdf sd vdfsv fvvv sdfds</div>
<div class="min-h-fit bg-gray-400
rounded-lg p-1">min-h-fit</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

Tailwind min height é uma propriedade CSS poderosa que pode ser usada de várias maneiras para criar designs da Web visualmente atraentes e responsivos.

Se você deseja garantir que um contêiner tenha sempre uma certa altura, manter um rodapé na parte inferior da página ou definir uma altura mínima para imagens, o Tailwind min-height o cobre.

Ao dominar essa propriedade, você pode levar suas habilidades de web design para o próximo nível e criar layouts impressionantes que impressionarão seus clientes e usuários.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone