Altura de camada que seja a da janela do navegador (CSS height: 100%)

Pergunta
Estou tentando fazer uma camada que ocupe a altura máxima da janela do navegador. Não sei se dá pra entender… o que quero é que o espaço da camada ocupe desde a parte de cima até a parte debaixo do navegador.

Provei com height:100%, que teoricamente deveria funcionar, porém não consigo que a camada chegue até abaixo. Coloquei cor de fundo para ver se chegava, mas termina onde terminam os conteúdos. Igual que width:100% ocupa todo a largura., não deveria com height:100% ocupar toda a altura?

Há alguma maneira de conseguir isto?
Ou algum truque para que o espaço ocupado da camada seja a altura completa da janela?

Valorize esta FAQ:
A FAQ Altura de camada que seja a da janela do navegador (CSS height: 100%) tem Pertence à categoria:
Resposta
Efetivamente, há um pequeno truque para conseguir que um container ocupe o tamanho completo da área disponível do navegador à altura.
Na verdade, você está fazendo bem, ou seja, está colocando o atributo height:100%, que é o que vai lhe servir para isto, porém também tem que colocá-los como atributos ao body e à etiqueta html.

Imagino que terá algo como isto:

<div id="container" style="width:100%; height:100%;">
Conteúdo que tem que ocupar todo o espaço do navegador.
</div>


Pois além disso, teria que colocar este outro, para que tanto o body como o html tenham o height=100%: (além de cada container que tiver até chegar à camada que quiser que ocupe toda a altura)

<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>

Um exemplo completo, construído com CSS, para que funcione a height: 100%:

<html>
<head>
   <title>construcao CSS utilizando toda a height</title>
   
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>

</head>

<body>
<div id="container" style="width:100%; height:100%;">
   <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">
      <div id="conteudolateral" style="padding: 30px 10px 0 10px;">
      Por <a href="http://www.guiarte.com">guiarte.com</a>
      <br />
      <br />
      Isto são conteúdos que colocamos na lateral esquerda. É muito fácil construir com container de toda a altura..
      </div>
   </div>
   <div id="map" style="height: 100%; margin-right:210px; background-color:#ffff99;">
   Conteúdo que tem que ocupar todo o espaço do navegador.
   </div>
</div>

</body>
</html>

Por Miguel Angel Alvarez

Voltar à árvore de categorias Voltar à árvore de categorias

Comentários da faq
Foram enviados 4 comentários à faq
3 comentários não revisados
1 comentário revisado:
Com header
Por: vitao_braga
13/3/11
estou querendo saber como que fazemos se precisarmos colocar um header...
tipo, ter um cabeçalho, dai preencher toda a pagina do fim do cabeçalho ate a borda inferior donavegador...

alguem sabe o que fazer nesse caso?!
abrass
 
FAQs relacionadas
  + Links que mudam ao passar o mouse
  + Diferenças de colocar estilos CSS em diferentes lugares
  + Mudar tipografia para toda a página
  + Mudar o tamanho de letra de um menu select
  + Estilo nos campos de formulário
  + Estilos em barras de deslocamento
  + Como eliminar as margens de cima e debaixo que tem um formulário
  + Definir as margens de um cabeçalho ou título <h1>
  + Alinhamento de texto à direita
  + Mudar o estilo da primeira letra de um parágrafo
  + [...]

Ver todas las FAQS de CSS

Usuários :    login / registro