Categories: CuriosidadesDicasTecnologia

Manipulando elementos de acordo com a altura da janela

Se você várias vezes já se pegou manipulando elementos com JavaScript e jQuery nem precisa ler esse post, sei lá, vai ler sobre Ionic 🙂

Caso você esteja começando no mundo do Front-end talvez você tenha tido esta dúvida. Como eu faço pra deixar um elemento (como uma div) da altura da janela?

Manipulando eventos com JavaScript

Um amigo me perguntou essa semana, e aí me lembrei que quando eu comecei, uma das primeiras coisas que eu quis aprender com Javascript foi isso, inclusive meu site tem isso, olha aqui:

Capa de Site

Eu chamo esse efeito de capa de site, acho que todo mundo chama assim. Ele é muito usado em sites One Page (aqueles sites que só tem uma página e você navega nela mesmo).

Exemplos de site com capa:

Hands On

HTML

Vamos criar um HTML simples com duas divs, uma que será a capa, outra com conteúdo, algo como isso abaixo. Também vamos criar uma função no onload, que vai ser a nossa função pra pegar a altura da janela e setar na nossa capa.

CSS

Pra não ficar tão feio, vamos colocar uma cor de fundo em cada div. Coloque a cor que você quiser, mas se estiver sem ideias:

JavaScript

Agora que começa a brincadeira. Primeiro, vamos armazenar em uma variável a altura do navegador. Depois, vamos atribuir a div #capa, a altura que acabamos de armazenar. Simplão!

Resultado:

Você pode, como teste, colocar a mesma altura na segunda div (com id#conteudo) e ver se você realmente aprendeu como se faz.

Outra brincadeira.

Coloque cada uma das divs, com metade da altura da tela.

CSS3

Atualmente, com CSS3, existem outras formas, sem Javascript de fazer a mesma coisa, colocando uma div com altura relativa a janela. Porém, infelizmente não é totalmente compatível com IE.

Se você não está nem ligando pro IE/Edge, deixa um comentário abaixo que eu posto sobre as medidas relativas do CSS3.

Ficou com dúvida? Deixa aí nos comentários!