Você deve saber isso sobre unidades de viewport

Existe um problema em definir a altura de um elemento em 100vh em navegadores móveis ao posicionar algo no bottom. Veja algumas considerações sobre isso.

Ir para o artigo

Já há algum tempo, é possível usar unidades de CSS moderno, 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).

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

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.

<div class="full-page-element">
  <button>Botaum</button>
</div>

<button>Botaum</button>

</div>

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  bottom: 10px;
  left: 10px;
  position: absolute;
}

.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:

body {
  /* É bom não ter que pensar no elemento-pai :) */
  height: 100vh;
  margin: 0;
}

body {

/* É bom não ter que pensar no elemento-pai :) */

height: 100vh;

margin: 0;

}

É apenas uma maneira rápida de garantir que <body> 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í: <body> é filho de <html>, que é apenas tão alto quanto o conteúdo que ele contém, assim como qualquer outro elemento.

Se for necessário que <body> tenha altura total, <html> também deverá ser envolvido no processo:

html,
body { 
  height: 100%;
}

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. O chrome do navegador empurra-o para cima e para baixo, como seria de esperar (veja o vídeo).

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.

See the Pen CSS Vars for viewport width minus scrollbar by Shaw (@shshaw) on CodePen.

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!