Programação
CSS
Pare de Usar 100vh no Mobile: O Guia Completo para Entender e Aplicar 100dvh Corretamente

Pare de Usar 100vh no Mobile: O Guia Completo para Entender e Aplicar 100dvh Corretamente

Paulo Coutinho Portuguese Iniciante

Em layouts responsivos, é comum criar seções que ocupam “a altura inteira da tela”, como heróis (hero sections), telas de boas-vindas e modais em tela cheia. Em computadores, a unidade CSS vh costuma funcionar como esperado, mas em dispositivos móveis surgem cortes, espaços em branco e saltos de layout.

Esses problemas normalmente não são causados por erro no CSS, e sim pela forma como navegadores móveis lidam com a própria interface, como barras de endereço e de navegação. Entender a diferença entre 100vh e 100dvh ajuda a construir telas realmente “full screen” sem conteúdo escondido atrás da interface do navegador.

Desbloqueie Todo o Conteúdo Premium

Assine agora e tenha acesso ilimitado a todo o conhecimento da plataforma

Artigos Ilimitados

Acesso completo a todos os artigos e tutoriais sem qualquer restrição

Todos os Cursos

Aprenda com todos os cursos criados pela plataforma e acelere sua carreira

Notícias em Primeira Mão

Fique por dentro de todas as novidades e tendências do mercado sem limites

Ver Planos e Assinar Agora

100vh 100dvh viewport height css mobile css responsivo front-end desenvolvimento frontend layout mobile css moderno ux mobile safari mobile css chrome mobile css dynamic viewport height spa frontend mobile first design responsivo css3