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?
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
