CSS: “min-height”: Muitos valores ou valores não reconhecidos.

A propriedade min-height define a altura mínima de um elemento. Ao contrário das propriedades abreviadas como margin ou padding, min-height aceita apenas um único valor. Fornecer múltiplos valores separados por espaços (por exemplo, min-height: 100px 200px) é inválido e irá desencadear este erro.

Este erro ocorre comumente por várias razões:

• Múltiplos valores fornecidos: min-height não é uma propriedade abreviada e não aceita mais de um valor.
• Unidades inválidas ou erros tipográficos: Usar uma unidade não reconhecida (por exemplo, 100pixels em vez de 100px) ou uma palavra-chave mal escrita.
• Usar funções CSS ou sintaxe não suportadas: Algumas funcionalidades CSS mais recentes como min-height: fit-content(200px) podem não ser reconhecidas pelo validador ou podem não ter suporte do browser.
• Confundir min-height com outras propriedades: Usar acidentalmente sintaxe destinada a propriedades como grid-template-rows ou expressões minmax().
• Unidades em falta em valores não-zero: Escrever min-height: 100 em vez de min-height: 100px. Zero é o único valor numérico que não requer uma unidade.

De acordo com a especificação CSS, valores válidos para min-height incluem:

Tipo de Valor	Exemplos
Comprimento	0, 100px, 10em, 5rem, 50vh
Percentagem	50%, 100%
Palavras-chave	auto, min-content, max-content, none
Funções	fit-content, calc(100vh - 50px)

Corrigir este problema garante que o seu CSS está em conformidade com os padrões e comporta-se de forma previsível entre browsers. Valores min-height inválidos serão ignorados pelos browsers, o que significa que o seu layout pode não ser renderizado como pretendido.

Exemplos

Incorreto: múltiplos valores

<div style="min-height: 100px 200px;">Content</div>

min-height aceita apenas um único valor. Esta não é uma propriedade abreviada.

Incorreto: unidade em falta

<div style="min-height: 100;">Content</div>

Valores numéricos não-zero devem incluir uma unidade.

Incorreto: palavra-chave inválida ou erro tipográfico

<div style="min-height: inheret;">Content</div>

A palavra-chave inherit está mal escrita.

Correto: valor de comprimento único

<div style="min-height: 100px;">Content</div>

Correto: valor de percentagem

<div style="min-height: 50%;">Content</div>

Correto: usar calc() para valores calculados

<div style="min-height: calc(100vh - 80px);">Content</div>

Correto: usar uma palavra-chave

<div style="min-height: min-content;">Content</div>

Correto: usar auto

<div style="min-height: auto;">Content</div>

Se você precisar definir tanto uma altura mínima quanto máxima num elemento, use min-height e max-height como propriedades separadas:

<div style="min-height: 100px; max-height: 400px;">Content</div>

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços