[Resolvido] Problemas com DIV

Danilo Almeida_135054 · Maio 17, 2012

Bom dia a todos

Preciso criar 3 DIVs da seguinte forma...

</div>

</div>

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

rafael-tdc · Maio 17, 2012

tenta com width: 100%;

Danilo Almeida_135054 · Maio 17, 2012

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 · Maio 17, 2012

veja se esse link te ajuda:

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

Danilo Almeida_135054 · Maio 18, 2012

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 · Maio 18, 2012

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

Talvez

body{display:table;}

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

Samuel Volpato · Maio 18, 2012

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.

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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 · Maio 18, 2012

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

Danilo Almeida_135054 · Maio 18, 2012

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

:S

Samuel Volpato · Maio 18, 2012

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 · Maio 18, 2012

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

:S

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>

:D

Danilo Almeida_135054 · Maio 18, 2012

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>

:D

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 · Maio 18, 2012

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.

Arquivado

[Resolvido] Problemas com DIV

Recommended Posts

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafael-tdc 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Samuel Volpato 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Everaldo Grunge 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Samuel Volpato 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jimmy Page_73975 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jimmy Page_73975 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Samuel Volpato 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Almeida_135054 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76