Como fazer uma div com altura e largura da tela do usuário

Neste artigo veremos como criar uma div com altura e largura da tela do usuário, sendo responsiva as mais diferentes telas com simples regras de CSS.

Fala programador(a), beleza? Bora aprender coisa nova?

Hoje responsividade é um assunto bem e alta, queremos sempre adaptar nossos sites e apps ao dispositivo do usuário

Surge então uma necessidade de fazer isso preenchendo a tela toda, ou seja, tendo uma div com largura e altura que se adapte a qualquer monitor

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Podemos fazer isso facilmente com CSS, apenas precisamos utilizar as propriedades height e width com valores especiais

Em vez de px, em, rem ou pt utilizaremos vh e vw

• vh: view height, ou seja, a altura da view (tela) do usuário;
• vw: view width, ou seja, a largura total da view (tela) do usuário;

Veja um exemplo:

.container {
 height: 100vh;
 width: 100vw;
}

Neste exemplo, container terá 100% da altura e largura da tela do usuário

E isso significa preencher a tela por completo, e também concluir nosso objetivo

E é claro que podemos utilizar esses valores com outros números

Por exemplo: metade da tela 50vw

Isso irá funcionar também e você deve utilizar conforme sua necessidade

Conclusão

Neste artigo vimos uma forma de deixar uma div ou elemento de forma que se adapte com comprimento total da tela do usuário

Tanto em largura como em altura com o valor de propriedade vh (view height) e vw (view width)

Porém utilizando as conhecidas propriedades height e width, setando o valor 100vh e 100vw respectivamente

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube