Propriedade Min-Height
Última atualização: 2026-09-13
min-height Propriedade Min-Height
A propriedade min-height define a altura mínima de um elemento, garantindo que ele mantenha certa altura mesmo quando seu conteúdo é curto. Seu valor padrão, 0, significa que não há limite inferior. É frequentemente usada para manter seções de página visualmente consistentes ou para fixar um rodapé no final da página.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
min-height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
0 | Palavra-chave | Sem altura mínima. |
<length> | Tipo | Uma altura mínima fixa. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O min-height tem precedência sobre height e max-height, e o elemento cresce automaticamente quando o conteúdo é mais alto.
❓ Perguntas Frequentes
QQual é a diferença entre min-height e height?
AO height é uma altura fixa, então conteúdo mais alto que o valor definido transborda a caixa e fica visível por padrão. O min-height define apenas um limite inferior: com conteúdo curto o elemento mantém a altura definida, e com conteúdo alto ele cresce automaticamente sem transbordar. É por isso que min-height é a escolha mais segura e flexível para componentes com tamanhos de conteúdo desconhecidos, como cards, modais e corpos de página.
QComo faço o corpo da página preencher pelo menos uma tela?
ADê ao contêiner principal min-height:100vh. Com pouco conteúdo, o corpo ainda preenche pelo menos a altura da viewport, e com mais conteúdo ele se estende para baixo, então o rodapé nunca fica pendurado no meio da tela. 100vh significa 100% da altura da viewport. Diferente de height:100vh, o min-height deixa a página rolar normalmente quando o conteúdo excede uma tela, em vez de ficar preso a uma altura fixa. É o padrão para shells de aplicativos e páginas de artigos.
QQual é melhor: min-height:100vh ou height:100vh?
AO height:100vh fixa a altura na viewport, então conteúdo mais longo transborda ou precisa rolar internamente, o que serve para apps de tela única como páginas de atividade móvel. O min-height:100vh garante pelo menos uma tela enquanto deixa o elemento crescer com o conteúdo, sendo ideal para layouts comuns de página. A maioria dos sites deve usar min-height:100vh, e combinado com flex também habilita um rodapé fixo (sticky footer), já que a área principal pode flexionar para empurrar o rodapé para o fundo de viewports curtas.
QPor que a porcentagem de min-height não tem efeito?
AComo o height, uma porcentagem de min-height é calculada em relação à altura da área de conteúdo do pai, e falha quando a altura do pai é auto. Para fazer um filho preencher a altura do pai, o pai precisa de uma altura definida primeiro, ou você pode mudar para um layout flex onde os itens se esticam automaticamente, já que align-items é stretch por padrão. Essa é a abordagem recomendada na maioria dos casos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
