Publicado em 17 de mai.

[Resolvido] Problemas com DIV

Bom dia a todos

Preciso criar 3 DIVs da seguinte forma...

<div class="topo">

</div>

 

 <div class="conteudo">

 </div>

 

<div class="rodape">

</div>

preciso que essas 3 div ocupe o tamanho da tela inteiro independente da resolução do monitor e que a div conteúdo fique fixa, ou seja, caso o conteudo seja maior que ela, exiba a barra de rolagem.

nao sei se fui bem claro, mais se alguém puder me ajudar, agradeço.

OBS: não estou criando site e sim um sistema em PHP

obrigado

esqueci de mencionar que a div topo e a div rodapé tem tamanhos fixos independentemente do tamanho do monitor, o problema ai esta sendo ajustar a div conteúdo para que fique entre as duas e que mantenha o radapé na parte inferior da tela

Discussão (20)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

rafael-tdc· 17 de mai.

tenta com width: 100%;

Danilo Almeida_135054· 17 de mai.

Width seria para largura, meu problema é com a altura da div conteudo que nao posso fixar uma altura nela pelo fato de uma resolução de monitor ser melhor que outra, e isso pode ficar um espaço em branco na parte de baixo ou dar barra de rolagem na tela inteira caso a resolução seja muito baixa.

Samuel Volpato· 17 de mai.

veja se esse link te ajuda:

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Danilo Almeida_135054· 18 de mai.

bom dia Samuel

ja utilizei essa técnica em outro projeto, mais não é exatamente isso que procuro.

Quero deixar minha página fixa, por exempo:

minha div topo com um tamanho fixo, meu rodapé no final da página com um tamanho fixo e minha div conteudo entre as duas ocupando o tamanho restante da página, porém, ela não poderá estender a página se o conteudo for maior e sim, mostrar uma barra de rolagem somente nela para exibição do restante do conteúdo.

Everaldo Grunge· 18 de mai.

>
Bom dia a todos

Preciso criar 3 DIVs da seguinte forma...

<div class="topo">

</div>

 

 <div class="conteudo">

 </div>

 

<div class="rodape">

</div>

preciso que essas 3 div ocupe o tamanho da tela inteiro independente da resolução do monitor e que a div conteúdo fique fixa, ou seja, caso o conteudo seja maior que ela, exiba a barra de rolagem.

nao sei se fui bem claro, mais se alguém puder me ajudar, agradeço.

OBS: não estou criando site e sim um sistema em PHP

obrigado

Talvez

body{display:table;}

, julgando que body é o elemento pai dessas três ai.

Samuel Volpato· 18 de mai.

>
bom dia Samuel

ja utilizei essa técnica em outro projeto, mais não é exatamente isso que procuro.

Quero deixar minha página fixa, por exempo:

Só pra ver se entendi, a div do meio vai ter uma rolagem, o topo e o rodapé sempre vão estar visíveis e fixas independente de onde a rolagem estiver?

Thiago Moraes· 18 de mai.

Não sei se é possível sem uso de javascript.

Eu sei que com javascript da pra pegar o valor da resolução de tela do usuário e não do viewport do navegador.

Danilo Almeida_135054· 18 de mai.

>
Só pra ver se entendi, a div do meio vai ter uma rolagem, o topo e o rodapé sempre vão estar visíveis e fixas independente de onde a rolagem estiver?

exatamente isso Samuel.

tentei fazer com frames mais nao deu certo pelo fato dos códigos php que devem ficar na mesma pagina.

Thiago Moraes· 18 de mai.

E se você não usar a div conteudo e colocar margem no topo e no bottom do body? pode dar certo.

Ah sim, não esquecendo de usar position absolute no header e no rodapé.

Jimmy Page_73975· 18 de mai.

Use a propriedade overflow:auto na div conteudo, essa propriedade cria uma barra de rolagem na div;

Olhe um exemplo que eu fiz e vê se é isso que você quer:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="topo"><h1>Topo</h1></div>

<div id="conteudo">

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

</div>

<div id="rodape"><h1>Rodape</h1></div>
</body>
</html>

CSS:

@charset "utf-8";
/ CSS Document /

*{margin:0;
 padding:0;}

#topo{width:100%;
 height:200px;
 text-align:center;
 background-color:#0F9;
}

#conteudo{width:100%;
 height:900px;
 overflow:auto; /*cria barra de rolagem na div*/
 text-align:center;
 background-color:#096;}

#rodape{width:100%;
	height:100px;

	background-color:#666;}

Crie um arquivo e veja.

Danilo Almeida_135054· 18 de mai.

>
Use a propriedade overflow:auto na div conteudo, essa propriedade cria uma barra de rolagem na div;

Olhe um exemplo que eu fiz e vê se é isso que você quer:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="topo"><h1>Topo</h1></div>

<div id="conteudo">

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />
ConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudoConteudo<br />

</div>

<div id="rodape"><h1>Rodape</h1></div>
</body>
</html>

CSS:

@charset "utf-8";
/ CSS Document /

*{margin:0;
 padding:0;}

#topo{width:100%;
 height:200px;
 text-align:center;
 background-color:#0F9;
}

#conteudo{width:100%;
 height:900px;
 overflow:auto; /*cria barra de rolagem na div*/
 text-align:center;
 background-color:#096;}

#rodape{width:100%;
	height:100px;

	background-color:#666;}

Crie um arquivo e veja.

daria certo se conseguisse deixar a div conteudo se auto ajustando aos diferentes tamanhos de monitores (resuluçao). dessa maneira esta ficando com 2 barras de rolagem no meu monitor, e se eu diminuir, ficará um espaço em branco na parte de baixo

>
E se você não usar a div conteudo e colocar margem no topo e no bottom do body? pode dar certo.

Ah sim, não esquecendo de usar position absolute no header e no rodapé.

bom Thiago, não entendi muito bem seu racionio.

tirar a div conteudo e deixar os conteudos diretamente do body?

Jimmy Page_73975· 18 de mai.

>
daria certo se conseguisse deixar a div conteudo se auto ajustando aos diferentes tamanhos de monitores (resuluçao). dessa maneira esta ficando com 2 barras de rolagem no meu monitor, e se eu diminuir, ficará um espaço em branco na parte de baixo

bom Thiago, não entendi muito bem seu racionio.

tirar a div conteudo e deixar os conteudos diretamente do body?

A cara então sei la :S

Porque a div conteudo esta com 100% de largura, isso faz ela se ajustar.

André do Vale· 18 de mai.

Com jQ:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body {

height: 100%;
}

* {

padding: 0;
margin: 0;
}

body {

margin: 100px 0;
}

body {

overflow: hidden;
}

body div:nth-child(1) {

height: 100px;
background: red;
position: absolute;
top: 0;
width: 100%;
}

body div:nth-child(2) {

background: green;
overflow: auto;
}

body div:nth-child(3) {

height: 100px;
background: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function alturaCentral(){

$('body>div').eq(1).css({
'height':$(window).height()-200
})
}
$(function(){
alturaCentral()

$(window).resize(function(){
	alturaCentral()
})
})
</script>
</head>

<body>
<div>Lorem</div>
<div>
	Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>iara
</div>
<div>Dolor</div>
</body>
</html>

Thiago Moraes· 18 de mai.

Muito bom, André Campos matou a charada...pelo menos aqui funcionou perfeitamente no FF e o código é válido.

Danilo Almeida_135054· 18 de mai.

>
Com jQ:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body {

height: 100%;
}

* {

padding: 0;
margin: 0;
}

body {

margin: 100px 0;
}

body {

overflow: hidden;
}

body div:nth-child(1) {

height: 100px;
background: red;
position: absolute;
top: 0;
width: 100%;
}

body div:nth-child(2) {

background: green;
overflow: auto;
}

body div:nth-child(3) {

height: 100px;
background: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function alturaCentral(){

$('body>div').eq(1).css({
'height':$(window).height()-200
})
}
$(function(){
alturaCentral()

$(window).resize(function(){
	alturaCentral()
})
})
</script>
</head>

<body>
<div>Lorem</div>
<div>
	Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>iara
</div>
<div>Dolor</div>
</body>
</html>

exatamente isso que precisa André... só que alegria durou pouco, não funfou na porcaria do IE

Samuel Volpato· 18 de mai.

>
exatamente isso Samuel.

tentei fazer com frames mais nao deu certo pelo fato dos códigos php que devem ficar na mesma pagina.

Creio que seja possível com JQuery (como o André Campos falou), mas com css na teoria é possível tu deixar o cabeçalho e rodapé fixados no topo e na parte inferior do navegador. Essas duas divs ficariam fixas por cima da div conteúdo.

Assim quando tu rolar a página cabeçalho e rodapé ficariam fixados na tela e a div conteúdo(por traz) moveria o conteúdo, caso a altura seja maior que a resolução.

André do Vale· 18 de mai.

>
exatamente isso que precisa André... só que alegria durou pouco, não funfou na porcaria do IE

Ops, seletores! Refeito:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body {

height: 100%;
overflow: hidden;
}

* {

padding: 0;
margin: 0;
}

body {

margin: 100px 0;
}

body div.topo {

height: 100px;
background: red;
position: absolute;
top: 0;
width: 100%;
}

body div.conteudo {

background: green;
overflow: auto;
}

body div.rodape {

height: 100px;
background: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function alturaCentral(){

$('body>.conteudo').css({
'height':$(window).height()-200
})
}
$(function(){
alturaCentral()

$(window).resize(function(){
	alturaCentral()
})
})
</script>
</head>

<body>
<div class="topo">Lorem</div>
<div class="conteudo">
	Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>iara
</div>
<div class="rodape">Dolor</div>
</body>
</html>

Danilo Almeida_135054· 18 de mai.

>
Com jQ:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body {

height: 100%;
}

* {

padding: 0;
margin: 0;
}

body {

margin: 100px 0;
}

body {

overflow: hidden;
}

body div:nth-child(1) {

height: 100px;
background: red;
position: absolute;
top: 0;
width: 100%;
}

body div:nth-child(2) {

background: green;
overflow: auto;
}

body div:nth-child(3) {

height: 100px;
background: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function alturaCentral(){

$('body>div').eq(1).css({
'height':$(window).height()-200
})
}
$(function(){
alturaCentral()

$(window).resize(function(){
	alturaCentral()
})
})
</script>
</head>

<body>
<div>Lorem</div>
<div>
	Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>iara
</div>
<div>Dolor</div>
</body>
</html>

outra coisa André, teria como mudar no css, como por exemplo:

no lugar de div:nth-child(1), colocar um ID para ela? pois vou ter mais divs dentro dessas e dessa forma pegara as filhas delas, correto?

desculpem, nao tinha visto o ultimo post... agora que agora vai dar certo, vou fazer os teste e posto aqui depois

vlw pela ajuda galera

>
Ops, seletores! Refeito:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body {

height: 100%;
overflow: hidden;
}

* {

padding: 0;
margin: 0;
}

body {

margin: 100px 0;
}

body div.topo {

height: 100px;
background: red;
position: absolute;
top: 0;
width: 100%;
}

body div.conteudo {

background: green;
overflow: auto;
}

body div.rodape {

height: 100px;
background: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function alturaCentral(){

$('body>.conteudo').css({
'height':$(window).height()-200
})
}
$(function(){
alturaCentral()

$(window).resize(function(){
	alturaCentral()
})
})
</script>
</head>

<body>
<div class="topo">Lorem</div>
<div class="conteudo">
	Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>Ipsum<br>iara
</div>
<div class="rodape">Dolor</div>
</body>
</html>

André, trabalho muito pouco com jQuery... preciso alterar as alturas da div rodape e div topo, quando altero no css, observo que a barra de rolagem se oculta um pouco e se aumento a propriedade no JQ height()-200 para outro valor de acordo com o CSS ele ainda sim da diferença... minha div topo ficara bem maior que 100px e creio que a rodape com 50px apenas... teria como fazer isso os as DIVs devem ter tamanho iguais?

André do Vale· 18 de mai.

Repare que 200 é a soma da alturas das divs .topo e .rodape. Altere o valor para a soma de suas divs. ;)

E, outra: altere a margem do body de acordo também com a altura de suas divs.

Danilo Almeida_135054· 18 de mai.

>
Repare que 200 é a soma da alturas das divs .topo e .rodape. Altere o valor para a soma de suas divs. ;)

E, outra: altere a margem do body de acordo também com a altura de suas divs.

beleza, agora sim... exatamente como queria

muito Obrigado André

abraços