Para diminuir a altura de uma div em HTML, use CSS com uma dessas 4 abordagens principais: 1) height fixo para altura absoluta (height: 100px), 2) max-height para limitar sem forçar (max-height: 200px), 3) aspect-ratio para altura proporcional à largura (aspect-ratio: 16/9), ou 4) overflow: hidden combinado com altura fixa para cortar conteúdo que excede.
A escolha depende de você querer altura absoluta, máxima flexível, proporcional ou com corte de conteúdo. Cada método resolve um cenário diferente e tem código pronto para copiar. Referência rápida das 4 abordagens:
| Método | Uso ideal | Exemplo prático |
|---|---|---|
height fixo | Altura sempre igual, sem variação | Cartão de produto com altura padrão |
max-height | Altura máxima com flexibilidade abaixo | Bloco de descrição que cresce até limite |
aspect-ratio | Altura proporcional à largura | Vídeo responsivo, imagem quadrada |
overflow: hidden | Cortar conteúdo excedente | Preview de texto com “leia mais” |
Antes de qualquer método, entenda o comportamento padrão: uma <div> sem CSS de altura ajusta automaticamente ao conteúdo interno (height: auto). Diminuir a altura significa forçar um valor menor que o conteúdo natural, o que exige decidir o que acontece com o conteúdo que não coube.
Método 1: propriedade height com valor fixo
O método mais direto. Define exatamente quanto de altura você quer, em qualquer unidade CSS válida (px, rem, em, %, vh, dvh).
Código básico:
<div class="minha-div">
Conteúdo aqui
</div>
.minha-div {
height: 100px;
}
Unidades disponíveis e quando usar cada uma:
px(pixels): valor absoluto, ignora zoom e configurações do usuário. Use quando quer altura exata (ex:height: 80px)rem: relativo ao tamanho da fonte raiz. Escalona com preferência do usuário. Use para altura acessível (ex:height: 5rem)em: relativo à fonte do elemento pai. Use com cuidado, pode encadear inesperadamente%: relativo à altura do elemento pai. SÓ FUNCIONA se o pai tem altura definidavh: viewport height, 1vh = 1% da altura da janela. Use para altura relativa à teladvh: dynamic viewport height, ajusta quando barras do navegador aparecem/somem no mobile. Use para altura mobile perfeita
Detalhe importante: height: 50% não funciona se o pai não tem altura definida. É o erro mais comum de iniciante. O navegador precisa saber a altura do pai para calcular 50%. Se o pai é o <body>, coloque html, body { height: 100%; } para funcionar.
Método 2: max-height para limitar sem forçar
Diferente de height (que força a altura), max-height estabelece um teto. A div cresce naturalmente com o conteúdo até esse teto, e para de crescer quando atinge o limite.
.minha-div {
max-height: 200px;
overflow: auto;
}
Combinado com overflow: auto (ou scroll), o conteúdo que excede vira scroll interno. Sem overflow, o conteúdo excedente vaza para fora da div (indesejado na maioria dos casos).
Diferença crítica entre height e max-height:
height: 100px= altura sempre 100px, mesmo com pouco conteúdo (div “vazia” grande) ou muito conteúdo (corta)max-height: 100px= altura acompanha o conteúdo até 100px, depois trava
Use max-height quando o conteúdo é dinâmico (comentários, mensagens de chat, feed) e você quer que a div se adapte mas nunca ocupe a tela toda.
Junto com max-height, faz sentido usar min-height para garantir altura mínima:
.minha-div {
min-height: 50px;
max-height: 200px;
overflow: auto;
}
Nesse caso a div sempre terá entre 50 e 200 pixels de altura, adaptando ao conteúdo dentro dessa faixa.
Método 3: aspect-ratio para altura proporcional à largura
Propriedade moderna (suporte universal desde 2021) que resolve elegantemente o problema clássico de “altura proporcional à largura sem JavaScript”.
.minha-div {
width: 100%;
aspect-ratio: 16 / 9;
}
Nesse exemplo, se a largura é 800px, a altura vira 450px automaticamente (proporção 16:9). Se a tela reduzir e a largura virar 320px, a altura ajusta para 180px mantendo a proporção.
Valores comuns de aspect-ratio:
1 / 1= quadrado perfeito16 / 9= vídeo widescreen (YouTube, filmes)4 / 3= formato antigo de TV, foto padrão3 / 4= retrato vertical (foto de perfil)21 / 9= ultrawide (cinema)
Casos de uso ideais:
- Container de vídeo responsivo (
iframedo YouTube) - Card de produto com foto quadrada
- Galeria de imagens uniformes
- Miniatura de post no blog
Antes do aspect-ratio, isso era feito com “padding hack” (padding-top: 56.25% para 16:9). Truque antigo que ainda funciona mas é feio e propenso a bug. aspect-ratio é o padrão moderno.
Método 4: overflow para cortar conteúdo excedente
Quando você define altura menor que o conteúdo, o padrão do CSS é vazar para fora da div. overflow controla o que acontece:
.minha-div {
height: 100px;
overflow: hidden;
}
Valores de overflow:
visible(padrão) = conteúdo vaza para fora, ignora alturahidden= corta conteúdo, sem scrollscroll= sempre mostra barra de rolagem, mesmo se não precisarauto= scroll aparece só se o conteúdo excede
Uso mais comum:
overflow: hidden= preview de texto (fade out no final), imagem cortada no card, “linha de vida” limitadaoverflow: auto= área de comentários rolável, chat, timelineoverflow: scroll= quando você quer garantir barra visível (design intencional)
Combinação prática para preview de texto com “leia mais”:
.preview {
height: 60px;
overflow: hidden;
position: relative;
}
.preview::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(transparent, white);
}
O ::after cria um fade gradual no final do texto cortado, dando aparência visual de “tem mais conteúdo”.
Altura da div em flexbox e grid (contextos modernos)
Em layouts modernos com Flexbox ou Grid, a altura da div funciona diferente porque o pai controla o comportamento dos filhos.
No Flexbox:
.pai {
display: flex;
height: 400px;
}
.filho {
flex: 1; /* preenche altura disponível */
/* ou */
height: 150px; /* altura específica */
}
flex: 1 faz o filho preencher todo o espaço restante do pai. Combinar com altura fixa em outros filhos permite layouts complexos com colunas de tamanhos diferentes.
No Grid:
.pai {
display: grid;
grid-template-rows: 100px 1fr 60px;
height: 100vh;
}
Aqui o pai tem 3 linhas: primeira 100px, segunda ocupa espaço restante (1fr), terceira 60px. Ideal para layout tipo “header + content + footer”.
Se quer entender melhor o funcionamento base de uma div antes de manipular altura, veja o que é uma div em HTML que cobre o elemento desde zero. E para posicionar a div com altura definida no centro da tela, o guia está em como centralizar uma div CSS.
Altura responsiva com media queries (mobile vs desktop)
Uma altura que funciona no desktop pode ficar quebrada no mobile. @media queries resolvem ajustando a altura por tamanho de tela.
/* Desktop padrão */
.minha-div {
height: 300px;
}
/* Tablet (768px ou menos) */
@media (max-width: 768px) {
.minha-div {
height: 200px;
}
}
/* Mobile (480px ou menos) */
@media (max-width: 480px) {
.minha-div {
height: 150px;
}
}
Padrão prático para 90% dos casos: use min-height ao invés de height fixo em mobile. Deixa o conteúdo respirar quando o texto quebra em mais linhas por causa da largura reduzida.
Para altura em unidades de viewport no mobile, prefira dvh ao invés de vh. O dvh (dynamic viewport height) ajusta quando a barra de endereço do navegador aparece/desaparece, evitando o bug clássico de “meu botão sumiu embaixo da barra”.
5 erros comuns ao diminuir altura de div HTML
Erro 1: usar height: 50% sem o pai ter altura definida Não funciona. Sem altura do pai, o navegador não sabe calcular 50% de quê. Solução: defina height: 100% no html e body ou use vh/dvh.
Erro 2: esquecer overflow quando forçar altura menor que o conteúdo Conteúdo vaza para fora da div e quebra o layout. Sempre combine altura reduzida com overflow: hidden ou overflow: auto.
Erro 3: usar vh no mobile sem prever a barra do navegador No iOS especialmente, 100vh é a altura incluindo a barra de endereço, então botão fixo no rodapé fica escondido. Solução: usar 100dvh (dynamic viewport height).
Erro 4: definir height em elemento que precisa crescer com conteúdo Se o elemento vai receber texto dinâmico (comentários, mensagens), height fixo corta ou deixa espaço vazio. Use max-height + overflow: auto.
Erro 5: usar aspect-ratio sem definir width aspect-ratio calcula a altura a partir da largura. Se a largura não está definida (ou é auto), o resultado é imprevisível. Sempre defina largura junto (width: 100% normalmente).
Perguntas frequentes
Como diminuir a altura de uma div em HTML?
Use CSS com uma das 4 propriedades principais: height para altura fixa (height: 100px), max-height para altura máxima com flexibilidade abaixo, aspect-ratio para altura proporcional à largura, ou combinação de altura fixa com overflow: hidden para cortar conteúdo excedente. A escolha depende do comportamento desejado.
Qual a diferença entre height e max-height?
height força a altura definida (a div fica sempre com aquele valor). max-height estabelece um teto: a div cresce naturalmente com o conteúdo até esse limite. Se você quer altura consistente = height. Se quer flexibilidade com teto = max-height combinado com overflow.
Por que height: 50% não funciona na minha div?
Porque o elemento pai não tem altura definida. Percentual precisa de referência: 50% de quê? Solução: defina html, body { height: 100%; } no CSS global para percentuais funcionarem. Ou use vh/dvh que são relativos à janela.
O que é aspect-ratio no CSS?
Propriedade moderna (universal desde 2021) que define proporção largura/altura de um elemento. aspect-ratio: 16/9 faz a altura ser 9/16 da largura automaticamente. Ideal para vídeos, imagens e cards que precisam manter proporção em qualquer tela sem hack de padding.
Como cortar conteúdo que passa da altura definida da div?
Use overflow: hidden para cortar sem scroll, overflow: auto para scroll aparecer só quando necessário, ou overflow: scroll para scroll sempre visível. overflow: hidden é o mais comum para preview de texto ou imagem em card.
Qual altura usar no mobile: vh ou dvh?
Use dvh (dynamic viewport height). No mobile, o vh tradicional inclui a barra de endereço do navegador, causando bug de elemento cortado. O dvh ajusta dinamicamente quando essa barra aparece ou some, mantendo o layout correto em qualquer estado.
Como fazer altura da div responsiva por tamanho de tela?
Use @media queries no CSS ajustando a altura por breakpoint. Exemplo: @media (max-width: 768px) { .minha-div { height: 200px; } }. Padrão prático: use min-height em vez de height fixo no mobile para deixar o conteúdo respirar quando quebra em mais linhas.
aspect-ratio funciona em todos os navegadores?
Sim, suporte universal desde 2021 (Chrome 88, Firefox 89, Safari 15). Em navegadores muito antigos (IE, versões antigas de Safari mobile) pode não funcionar. Se precisa suporte legado, mantenha o padding-hack tradicional como fallback (padding-top: 56.25% para 16:9).
