22 de out de 2013

Div ocupando toda a altura de uma página

Uma coisa fácil de se fazer com HTML e CSS, é definir que uma div ocupe a largura toda da tela do navegador, basta setar width: 100% no css, mas para esta div pegar toda a altura da tela, independente se o monitor é redimensionado ou não, pode ser uma tarefa um pouco mais complicada, mas pode ser resolvida assim:

HTML:
criei aqui uma div bem simples, apenas para exemplificar


CSS:
html, body{
 height:100%; /* aqui definimos que o html e o body terão altura de 100% */
}
.Sua-Div{
 width:100%; height:auto; min-height:100%; /* aqui é onde acontece a mágica, a propriedade height:auto e min-height: 100% fará com que esta div ocupe sempre a altura total do navegador, mesmo quando redimensionado */
 background:blue;
}

Façam seus testes, se tiverem outros meios de fazer a mesma coisa, postem nos comentários!

Com este código, sua div ocupará a altura total do navegador, mesmo se ele for redimensionado.

8 comentários:

  1. Legal saber disso. Eu nunca pensei em colocar height fixo no html / body. Por isso sempre tinha a altura certa em todos os browsers exceto no firefox.

    Com essa dica dá para forçar o firefox a ficar em uma altura mínima.

    ResponderExcluir
  2. Olá, esta dica ajudou imenso! No entanto, tenho quatro secções e queria que ambas ocupassem a altura do ecrã (uma de cada vez). O problema é que quando coloco o código na primeira secção, a segunda entra em conflito. Como resolver este problema?

    ResponderExcluir
    Respostas
    1. Não entendi o problema... Será que o conflito não é resolvido usando duas classes diferentes?

      Excluir
  3. Obrigado cara, ajudou muito!

    ResponderExcluir
  4. Poha cara... eu tava quebrando a cabeça pq nem o background-size estava ajudando... depois vi que não tinha declarado a height do body... as vezes um descuido simples, pode atrasar o desenvolvimento do layout '-'

    ResponderExcluir
  5. Muito bom!!
    uma coisa tão simples mas utilizando criativamente fica bem legal.

    ResponderExcluir