Entenda de uma vez por todas como utilizar o height 100% no CSS

Olá pessoal! Acredito que mesmo você sendo desenvolvedor(a), iniciante ou experiente, já deve ter se deparado com esse problema: Como utilizar uma altura (height) 100% no CSS?

Nesse post passarei uma dica bem simples, porém bastante útil, além de explicar alguns conceitos e uma outra forma de realizar essa tarefa.

Entendendo unidades de medidas CSS

Antes de irmos direto ao assunto, vamos primeiro entender o que são unidades de medidas relativas no CSS.

Medidas relativas

  • Para fontes: em, ex, ch, rem
  • Porcentagem da viewport: vw, vh, vmin, vmax
  • A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida, porém sabemos que funciona como relativa também ;-).

Medidas absolutas

  • cm, mm, q, in, pt, pc, px

Unidades de medidas para outras quantidades

  • Ângulos: deg, grad, rad, turn
  • Duração: s, ms
  • Frequência: Hz, kHz
  • Resolução: dpi, dpcm, dppx

Height 100%, utilizando porcentagem

Agora que sabemos quais unidade de medidas existem no CSS, o nosso objetivo é que a altura (height).

A grande maioria das pessoas têm dificuldades em realizar essa configuração devido sempre utilizar o %, ou seja, height: 100%, porém como já devem ter percebido, não funciona, pois o porcentagem faz-se necessário um referencial, ou seja, 100% em relação a que elemento?

width: 100% funciona, pois por padrão a largura do box CSS é toda a largura da tela, ou seja, ele já vem com o auto que calcula o valor para ele de 100%, porém o height a propriedade auto não pega toda a altura, sendo assim não conseguimos calcular o height 100%.

Ainda não entendi!

Ok, vamos ao exemplo, caso você tenha uma div (#pai) e define uma altura de 300px, e uma div (#filha) com uma altura em 50%, verá que a div filha ocupará 50% da div pai, segue o exemplo:

 

E como faremos para que ela funcione sem o elemento pai? Não tem como! Porém o que podemos fazer é definir a tag html e a tag body com uma altura de 100%, nesse caso a tag pai é a própria tag html, e a tag body filha de html, ou seja, qualquer outra que vier abaixo dela, irá utilizá-la como referência para a altura, segue exemplo:

 

Observe que a altura é considerada toda a tela, ou seja, exibirá uma barra de rolagem por conta das barras de menu (PCs).

O pulo do gato: Height 100% utilizando viewport

Outra forma mais simples, que recomendo, caso você queira utilizar a altura 100% é utilizar a unidade relativa vh, pois dessa forma faremos sempre a altura se ajustar a altura do dispositivo, facilitando principalmente quando necessitar de sliders com height 100% e também poderá utilizar o vw, para width 100%.

Veja o exemplo abaixo:

 

Finalizando…

Espero que tenham entendido, de uma vez por todas, como utilizar o height 100%, e que esse post tenha ajudado a facilitar sua vida de hoje em diante.

Deixe seus comentários, até o próximo post! ;-D

 

 

 

About the author

Add a Comment