Propriedade Height
Última atualização: 2026-09-13
height Propriedade Height
A propriedade height define a altura da área de conteúdo de um elemento e, junto com o width, é uma propriedade de dimensionamento central do modelo de caixa do CSS. Seu valor padrão, auto, faz o navegador calcular a altura a partir do conteúdo, que é a abordagem mais comum e recomendada. Alturas em porcentagem só têm efeito quando o pai tem uma altura explícita; caso contrário, resolvem para 0.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | O navegador calcula a altura automaticamente. |
<length> | Tipo | Um valor de comprimento fixo. |
<percentage> | Tipo | Uma porcentagem relativa à altura do bloco que a contém. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： Uma altura em porcentagem exige que o pai tenha uma altura explícita; caso contrário, não tem efeito. Use unidades vh se quiser que um elemento preencha a viewport.
❓ Perguntas Frequentes
QPor que height:100% não funciona?
APorque uma altura em porcentagem é resolvida em relação à altura da área de conteúdo do pai, e quando a altura do pai é auto (o padrão), 100% de auto ainda é auto, então a altura em porcentagem do filho é ignorada. Soluções: dê ao pai uma altura explícita, que é a correção mais direta e funciona em todo lugar; use unidades vh, em que height:100vh equivale à altura da viewport; ou use flex ou grid para o filho se esticar automaticamente.
QComo faço a altura de um elemento crescer com o conteúdo?
AMantenha o padrão height:auto; a altura de um elemento de nível de bloco é então determinada pelo conteúdo. Para um controle mais fino, use min-height como limite inferior e max-height como limite superior: min-height:200px garante uma altura mínima enquanto deixa a caixa crescer quando o conteúdo é mais alto, e max-height limita a altura com o overflow tratando o excesso. Evite codificar height fixo para conteúdo comum.
QQual é a diferença entre height:auto e height:100vh?
AO height:auto dimensiona o elemento conforme seu conteúdo, então conteúdo curto faz uma caixa baixa e conteúdo longo faz uma caixa alta. O height:100vh torna o elemento exatamente tão alto quanto a viewport, então preenche a tela inteira mesmo com pouco conteúdo e transborda quando o conteúdo a excede. Para deixar o corpo da página com pelo menos uma tela de altura mas ainda permitindo crescimento, prefira min-height:100vh em vez de height:100vh.
QComo faço um elemento filho preencher a altura do pai?
AOpção um: dê ao pai uma altura fixa e ao filho height:100%. Opção dois: defina o pai como display:flex e deixe o filho se esticar com align-self:stretch, já que os itens flex se esticam por padrão. Opção três: em grid, use height:100% ou 1fr para o filho. Observe que height:100% só funciona quando o próprio pai tem uma altura definida; caso contrário, é ignorado.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
