Verificação HTML: CSS: "height": Demasiados valores ou valores não são reconhecidos.

Sobre este problema de CSS

O validador W3C verifica estilos inline e folhas de estilos incorporadas para CSS válido. Quando encontra uma declaração height com múltiplos valores ou um valor não reconhecido, sinaliza o erro porque height não é uma propriedade abreviada — aceita apenas um valor de cada vez. Isto difere de propriedades como margin ou padding, que aceitam múltiplos valores para atingir diferentes lados de um elemento.

Este erro ocorre comummente quando você:

Fornece acidentalmente dois valores, talvez confundindo height com uma propriedade abreviada (ex.: height: 100px 50px;).
Inclui um erro de digitação ou unidade inválida (ex.: height: 100ppx; ou height: 100pixels;).
Usa uma função CSS incorretamente (ex.: height: calc(100% 20px); — falta o operador).
Copia um valor destinado a outra propriedade, como colar um valor de grid-template-rows em height.

Os navegadores podem ignorar silenciosamente declarações height inválidas, fazendo com que o seu elemento recorra ao seu dimensionamento padrão (auto). Isto pode levar a comportamento de layout inesperado que é difícil de debugar. Manter o seu CSS válido garante renderização consistente entre navegadores e ajuda a detetar erros precocemente.

Valores válidos para `height`

A propriedade height aceita exatamente um dos seguintes:

Valores de comprimento: 100px, 10em, 5rem, 20vh, etc.
Valores de percentagem: 50%, 100%
Valores de palavra-chave: auto, max-content, min-content, fit-content(200px)
Valores globais: inherit, initial, revert, unset
Expressões calc: calc(100% - 20px), calc(50vh + 2rem)

Exemplos

Incorreto: demasiados valores

<style>
  .box {
    height: 100px 50px; /* Erro: height aceita apenas um valor */
  }
</style>
<div class="box">Conteúdo</div>

Incorreto: valor não reconhecido

<style>
  .box {
    height: 100pixels; /* Erro: "pixels" não é uma unidade válida */
  }
</style>
<div class="box">Conteúdo</div>

Incorreto: expressão `calc()` mal formada

<style>
  .box {
    height: calc(100% 20px); /* Erro: falta operador entre valores */
  }
</style>
<div class="box">Conteúdo</div>

Correto: valor de comprimento único

<style>
  .box {
    height: 100px;
  }
</style>
<div class="box">Conteúdo</div>

Correto: valor de percentagem

<style>
  .box {
    height: 50%;
  }
</style>
<div class="box">Conteúdo</div>

Correto: `calc()` com operador adequado

<style>
  .box {
    height: calc(100% - 20px);
  }
</style>
<div class="box">Conteúdo</div>

Correto: valor de palavra-chave

<style>
  .box {
    height: auto;
  }
</style>
<div class="box">Conteúdo</div>

Se precisa de definir tanto width como height, lembre-se de que são propriedades separadas e devem ser declaradas individualmente. Se estava a tentar definir uma altura mínima e máxima, use min-height e max-height como declarações distintas em vez de combinar valores numa única propriedade height.