Existem algumas unidades de medida CSS 3 chamadas:
O que são comprimentos de porcentagem de viewport?
A partir da recomendação de candidato W3 vinculada acima:
Os comprimentos de porcentagem da viewport são relativos ao tamanho do bloco inicial. Quando a altura ou largura do bloco inicial é alterada, elas são dimensionadas de acordo.
Essas unidades são vh
(altura da viewport), vw
(largura da viewport), vmin
(comprimento mínimo da viewport) e vmax
(comprimento máximo da viewport).
Como isso pode ser usado para fazer um divisor preencher a altura do navegador?
Para esta pergunta, podemos usar vh
: 1vh
é igual a 1% da altura da janela de visualização. Ou seja, 100vh
é igual à altura da janela do navegador, independentemente de onde o elemento esteja situado na árvore DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
Isso é literalmente tudo o que é necessário. Aqui está um exemplo JSFiddle disso em uso.
Quais navegadores suportam essas novas unidades?
Atualmente, isso é suportado em todos os principais navegadores atualizados, além do Opera Mini. Confira Posso usar ... para obter mais suporte.
Como isso pode ser usado com várias colunas?
No caso da pergunta em questão, apresentando um divisor esquerdo e um direito, aqui está um exemplo do JSFiddle mostrando um layout de duas colunas envolvendo ambos vh
e vw
.
Qual é a 100vh
diferença 100%
?
Veja este layout, por exemplo:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
A p
tag aqui é definida como 100% de altura, mas como a sua contém div
200 pixels de altura, 100% de 200 pixels se tornam 200 pixels, e não 100% da body
altura. Em 100vh
vez disso, usar significa que a p
tag terá 100% de altura body
independentemente da div
altura. Dê uma olhada neste JSFiddle que o acompanha para ver facilmente a diferença!