Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

blacktrindade

Site dimensionavel

Por , em Desenvolvimento frontend

Recommended Posts

blacktrindade    2

blacktrindade
Postado

Bom pessoal estou querendo aprender novos tipos de desenvolvimento de um site dimensionável, já fiz alguns que deram certo outras vezes deram errado, ou seja estou fazendo confusão nesta parte.

 

Queria ver qual forma vocês utilizam para que o código abaixo fique ocupando totalmente a tela do usuário:

 

 

<body>

<div id="layout">

<div id="topo"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

</div>
</body>

 

Ou seja o topo ficar 100% de largura e 120px de altura.(Este eu sei fazer);

 

o Conteúdo ficar com largura de 1024px e altura de 100% ou seja ele vai ocupar a tela até o rodapé.

 

o Rodapé ficar com largura de 100% e 200px de altura (este eu sei fazer);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

CSS

body, html { height: 100%; }
#layout { min-height: 100%; }
#topo { height: 120px; background: blue; /* pra diferenciar os elementos */ }
#conteudo {
  position: absolute;
  width: 1024px;
  top: 120px; /* header height */
  bottom: 20px; /* footer height */
  left: 50%;
  margin-left: -512px; /* [width]/2 */
  background: red; /* pra diferenciar os elementos */
}
#rodape {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background: green; /* pra diferenciar os elementos */
}

:seta: Resultado

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito