# Você deve saber isso sobre unidades de viewport > Você deve saber isso sobre unidades viewport. Comportamentos inesperados, bugs mobile comuns e soluções práticas para vh, vw. Evite problemas! URL: https://dpw.dev/css/voce-deve-saber-isso-sobre-unidades-de-viewport/ Publicado em: 2019-11-11 Categoria: css Tags: layout, web-design-responsivo Autor: Tárcio Zemel Já há algum tempo, é possível usar [unidades de CSS moderno](/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/), mas existe um problema com a definição da altura de um elemento em `100vh` em navegadores móveis ao posicionar algo em sua parte inferior (bottom). > Artigo baseado em [Some Things You Oughta Know When Working with Viewport Units](https://css-tricks.com/some-things-you-oughta-know-when-working-with-viewport-units/). O problema pode ser ilustrado da seguinte forma: ![Algumas coisas que você deve saber ao trabalhar com unidades de viewport: a ilustração do problema](/images/blog/voce-deve-saber-isso-sobre-unidades-de-viewport/algumas-coisas-que-voce-deve-saber-ao-trabalhar-com-unidades-de-viewport-ilustrando-o-problema.webp) O problema é que o Google Chrome não leva em conta a barra de endereços (vulga adress bar) quando ela é revelada, o que corta o elemento, forçando sua parte inferior a passar pela parte inferior (bottom) da viewport atual. ```html

``` ```scss .full-page-element { height: 100vh; position: relative; } .full-page-element button { bottom: 10px; left: 10px; position: absolute; } ``` Seria de se esperar que o botão na ilustração mostrada acima estivesse visível (supondo que esse elemento estivesse no topo da página e nenhuma rolagem feita), pois está ao longo do limite inferior de um elemento de `100vh`. Mas, na verdade, o que acontece é que ele fica escondido atrás dos elementos do browser em navegadores móveis, incluindo iOS Safari e Android Chrome. Este é um snippet de CSS bastante usado: ```scss body { /* É bom não ter que pensar no elemento-pai :) */ height: 100vh; margin: 0; } ``` É apenas uma maneira rápida de garantir que `` esteja com altura total sem envolver outros elementos. Normalmente, devs fazem isso bastante, mas alguns relatam que isso pode ser um pouco problemático, podendo ocasionar _jumpiness_ à medida que o chrome do navegador aparece e desaparece ou as coisas podem não estar tão centralizadas quanto se espera. É automático pensar em fazer `body { height: 100% }`, mas há uma pegadinha aí: `` é filho de ``, que é apenas tão alto quanto o conteúdo que ele contém, assim como qualquer outro elemento. Se for necessário que `` tenha altura total, `` também deverá ser envolvido no processo: ```scss html, body { height: 100%; } ``` O que é bem simples de se fazer e tem consistência confiável entre navegadores (vulgarmente conhecido como _cross-browser_). É o posicionamento das coisas ao longo da borda inferior que é complicado. É problemático por causa da `position: absolute` dentro do contêiner "altura total" (geralmente mais alto que o visível). Se você estiver tentando colocar algo como uma barra de navegação fixa na parte inferior da tela, provavelmente faria isso com `position: fixed; bottom: 0;`, [que parece funcionar bem](https://codepen.io/chriscoyier/pen/XWWgXZb). O chrome do navegador empurra-o para cima e para baixo, como seria de esperar ([veja o vídeo](https://d.pr/v/wBplXd)). Unidades de viewport horizontais são igualmente estranhas e problemáticas devido a outra parte da UI do navegador: **barras de rolagem**. Se uma janela do navegador tiver uma barra de rolagem visível, essa barra de rolagem geralmente será inserida no espaço visual, embora um valor de `100vw` seja calculado como se a barra de rolagem não estivesse lá. Em outras palavras, `100vw` causará rolagem horizontal de uma maneira que você provavelmente não esperaria. [Exemplo no CodePen](https://codepen.io/anon/pen/JqGmKx) ## Conclusão Apesar de alguns devs conseguirem alguns resultados para problemas relacionados a trabalhar com unidades de viewport usando `calc()` e outras soluções menos ortodoxas, de qualquer maneira, estas peculiaridades devem ser levadas em conta no momento do desenvolvimento. E você, já teve problemas com isso? Que solução usou para sair dessa? Comente! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml