Luigi Moretti

Unidades CSS: vh, dvh, lvh e svh — Entenda o que são e quando usar

Written by

Luigi

in

Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos.

trecho de código CSS com medidas de width, height e opacity em porcentagem.
Foto de Pankaj Patel na Unsplash

Introdução

Você provavelmente já usou vh para controlar a altura de um layout em CSS, certo?

Mas e quando o layout “quebra” em um smartphone por causa da barra de endereço que aparece e desaparece? Ou quando a rolagem empurra seu conteúdo para fora da tela sem motivo aparente?

Pois é, essas dores são antigas — e as novas unidades dvh, lvh e svh surgiram exatamente para resolver isso.

Neste artigo, você vai entender:

  • Como funcionam as unidades de altura de viewport (vh e derivados)
  • O histórico das unidades CSS
  • Quando e como usar as novas unidades de forma segura

Vamos nessa!

Um breve histórico das unidades CSS

As unidades CSS sempre foram uma forma de expressar tamanhos relativos ou absolutos de elementos. Aqui está um resumo:

📐 Unidades Absolutas

  • px (pixels)
  • pt, cm, in (pouco usados na web)

📐 Unidades Relativas

  • em, rem — relativas ao tamanho da fonte
  • % — relativa ao elemento pai
  • vw, vh — relativas à viewport

As unidades vw e vh surgiram com o CSS3, permitindo layouts responsivos baseados no tamanho da tela do usuário.

  • 1vh = 1% da altura da viewport
  • 1vw = 1% da largura da viewport

Mas… com a chegada dos navegadores móveis, as coisas começaram a ficar menos previsíveis.

O problema com vh em dispositivos móveis

Em navegadores móveis (especialmente iOS e Android), a altura da viewport muda conforme:

  • A barra de endereço aparece ou desaparece.
  • O teclado virtual é ativado.
  • O modo de rolagem entra em ação.

Isso significa que um 100vh pode não ocupar exatamente a tela toda como você esperava, causando efeitos visuais ruins como:

  • Conteúdo cortado
  • Rolagem desnecessária
  • Layouts instáveis

A solução moderna: dvh, lvh, svh

Com o CSS Values and Units Level 4, surgiram unidades mais precisas e conscientes da “realidade da viewport”:

dvh (Dynamic Viewport Height)

  • Corresponde à altura visível no momento, ajustada dinamicamente conforme a presença ou ausência da barra de endereço ou teclado virtual.
  • Ideal para lidar com interfaces que mudam de tamanho (ex: rolagem em navegadores móveis).

svh (Small Viewport Height)

  • Altura mínima da viewport, normalmente quando as barras (de endereço) do navegador estão visíveis.
  • Útil para garantir que algo sempre caiba mesmo nas condições mais restritivas.

lvh (Large Viewport Height)

  • Altura máxima da viewport, quando o navegador está em “modo imersivo”.
  • Ideal para quando você quer aproveitar o máximo possível de espaço, pois ignora o espaço ocupado pela barra de endereço ou teclado virtual.

Exemplo prático: Hero com altura da tela real

CSS
.hero {
  height: 100dvh; /* Novo padrão mais confiável */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}

💡 Dica: Use dvh como substituto moderno de vh para evitar bugs visuais em mobile.

Compatibilidade e fallback

Suporte

As unidades dvh, lvh, svh são suportadas nos principais navegadores modernos (Chrome 108+, Safari 16+, Firefox 109+).

Fallback recomendado:

CSS
.hero {
  height: 100vh; /* Fallback para navegadores antigos */
  height: 100dvh;
}

Como o segundo height sobrescreve o primeiro, navegadores modernos usarão dvh e os mais antigos seguirão com vh.

Boas práticas

  • Prefira dvh sempre que estiver lidando com telas cheias, especialmente em mobile.
  • Use svh se quiser garantir que o conteúdo nunca será cortado.
  • Use lvh se quiser usar o máximo de altura possível para experiências imersivas.
  • Combine com clamp() e env(safe-area-inset-*) para layouts 100% seguros e acessíveis (Clique aqui para saber mais sobre safe-area-inset).

Conclusão

As novas unidades de altura (dvh, svh, lvh) chegaram para resolver problemas reais de layout em dispositivos móveis e modernos.
Elas tornam seu CSS mais robusto, previsível e adaptável.

Se você ainda usa apenas vh, este é o momento ideal para atualizar seu toolkit e escrever CSS mais confiável para todos os dispositivos.

📬 Gostou do artigo?
Me siga no LinkedIn para mais conteúdos práticos sobre CSS moderno, UX e desenvolvimento frontend!

Referências

More posts