Criar Web, manuais e recursos para desenvolvimento web

Manuais

Programas

FAQS

Diretório

Comunidade

Inicio > FAQ


	SEÇÕES

Monotemáticos

+ HTML

+ CSS

+ PHP

+ ASP

+ Javascript

Manuais

+ Desde 0

+ Tecnologia

+ Divulgação de sites

+ Flash

Outras Seções

+ Faqs

Serviços e comunidade

+ Boletim

+ Enquete

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net

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

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 Uma resposta
Pertence à categoria:

CSS

Resposta de Miguel Angel Alvarez

02/1/08

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>

FAQ 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
  + Centralizar conteúdo da página
  + Elementos de listas LI na mesma linha
  + Links visitados
  + Cor de fonte em uma tabela
  + Aplicar estilo à primeira linha de um texto
  + Caixa com CSS
  + Construir um boletim com CSS
  + Clip em um div
  + Textarea sem borda
  + Menu dinâmico com CSS
  + Diferença entre atributos CSS margin e padding
  + Construir por tabelas ou camadas
  + Como posso mudar a cor da barra de deslocamento?
  + Mudar a cor dos links
  + Menu com CSS
  + Cursor com imagem
  + Como posso mudar a cor das células quando passo o ponteiro por cima delas?
  + Camadas com CSS
  + Estilo em tabelas HTML com CSS
  + Ocultar camadas com Css
  + CSS dinâmico com ASP
  + Minúsculas com CSS
Complementar a resposta
Voltar à árvore de categorias

Sobre nós | Copyright | Anuncie | Entrar em contato

Hospedado por Hostnet Hospedagem de Sites