Ir para conteúdo

POWERED BY:

Arquivado

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

matheusmarson

[Resolvido] Div com 100% de altura com topo, conteudo e rodape

Por , em Desenvolvimento frontend

Recommended Posts

matheusmarson    0

matheusmarson
Postado

Senhores

 

Estou com muita dificuldade para montar a estrutura de uma página onde teria um topo, o conteudo e um rodape

O meu problema é que a div de conteudo que desejo que ocupe todo o restante da altura da página não fuciona

Segue meu html e ccs para se algum puder me ajudar

 

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=iso-8859-1" />
<title>Namoom.com.br - Para você comprar e vender de tudo!</title>
<link href="css/principal.css" rel="stylesheet" type="text/css" />
</head>

<body align="center">
<div id="main" align="center">
<div id="TOPO">topo</div>
   <div id="CORPO">
   	<p><h1>teste</h1></p>
</div>
   <div id="RODAPE">rodape</div>
</div>
</body>
</html>


CSS
* {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-weight: inherit;
       font-style: inherit;
       font-size: 100%;
       font-family: inherit;
       vertical-align: baseline;
}
html {
height: 100%;
}

body {
height:100%;
min-height: 100%;
margin:0px;
padding:0px;
height:100%;
background-color:#000000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   text-align:center;      
}

#main {
height: 100%;
min-height: 100%;
margin:0px auto;
width: 90%;
background-color:#666666;
color:#FFFFFF;
}

/* Para o IE */
* html #main{
height:100%;
}

#TOPO {
       width: 100%;
       height: 121px;
       background-color:red;
}
#CORPO {
       width: 100%;
	min-height: auto;
       background-color: blue;
}
#RODAPE {
       width: 100%;
       height: 80px;
       background-color: yellow;
}

 

Já tentei um monte de coisa e nada

Desde já eu agradeço a atenção de todos

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

Eu vi esse tutorial que me indicou, mas não é bem isso que eu preciso.

Eu necessito que a div conteudo preencha todo o espaço entre o cabeçalho e o rodape na altura quando o conteudo for pequeno e quando o conteudo for grande, empurar o rodapé pra baixo.

Não sei se consegui explicar direito, rsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Nao é possivel fazer um height 100% da Tela, e sim do conteudo dentro da DIV, voce deve fazer o seguinte...

Na propriedade css da sua div faca um min-height do tamanho desejado, e no height coloque 100% com issso a div vai se alongar caso o conteudo seja maior que o tamanho minimo do height...

Qualquer duvida posta ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

Fiz como me disse mas não deu certo.

O rodapé some da tela, fica pra baixo. A div conteudo empurra muito ele para baixo.

 

O css ficou assim;

 

* {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
}
html {
       height: 100%;
}

body {
       height:100%;
       min-height: 100%;
       margin:0px;
       padding:0px;
       background-color:#000000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   text-align:center;      
}

#main {
       height: 100%;
       margin: 0px auto;
       width: 90%;
       background-color:#ffffff;
       color:#000000;
}

/* Para o IE */
* html #main{
height:100%;
}

#TOPO {
height: 121px;
   background-color:red;
}
#CONTEUDO {
   min-height: 100%;
height: 100%;
overflow: hidden;
background-color: blue;
}
#RODAPE {
       height: 80px;
	width: 100%;
       background-color: yellow;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

matheusmarson, quando for adicionar códigos nos seus posts, por favor, coloque-os entre a tag 

, é o segundo tópico seu que eu edito.
 
Aquele link do Maujor faz exatamente o que você descreveu ai embaixo: http://maujor.com/tutorial/rodape-embaixo-da-janela.php


Eu vi esse tutorial que me indicou, mas não é bem isso que eu preciso.


Eu necessito que a div conteudo preencha todo o espaço entre o cabeçalho e o rodape na altura quando o conteudo for pequeno e quando o conteudo for grande, empurar o rodapé pra baixo.


Não sei se consegui explicar direito, rsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

opa suave

simplismente coloque um float como abaixo e o min heigth para um tamanho fixo coloquei 200 olha ai;

#TOPO {
height: 121px;
background-color:red;
float:left;
}
#CONTEUDO {
min-height: 200px;
height: 100%;
overflow: hidden;
background-color: blue;
float:left;
}
#RODAPE {
height: 80px;
width: 100%;
background-color: yellow;
float:left;
}

 

vlw...

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

Também não deu certo não. O rodape continua escondido na tela. É preciso rolar a a barra vertical ainda.

É exatamente isso que não quero como o conteúdo for pequeno.

 

O código completo está assim:

================= 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=iso-8859-1" />
<title>Namoom.com.br - Para você comprar e vender de tudo!</title>
<link href="principal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main" align="center">
<div id="TOPO">topo</div>
   <div id="CORPO">
   	<p><h1>teste
   	</h1>
   	<p> </p>
   </div>
   <div id="RODAPE">
     <p>rodape</p>
     <p>auishdfoiuash doifuah isouf houasdhf</p>
     <p>asdfoias hdpfoiua hspdoufaphsdf</p>
     <p>asdf uai sdhofiua shdfiua shodf</p>
   </div>
</div>
</body>
</html>


====================== CSS ======================
* {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
}
html {
       height: 100%;
}

body {
       height:100%;
       min-height: 100%;
       margin:0px;
       padding:0px;
       background-color:#000000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   text-align:center;      
}

#main {
       height: 100%;
       margin: 0px auto;
       width: 90%;
       background-color:#ffffff;
       color:#000000;
}

/* Para o IE */
* html #main{
height:100%;
}

#TOPO {
width: 100%;
height: 121px;
background-color:red;
}
#CORPO {
width: 100%;
height: 100%;
min-height: 200px;
overflow: hidden;
background-color: blue;
}
#RODAPE {
height: 80px;
width: 100%;
background-color: yellow;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Amigo Coloquei o CSS junto ao codigo HTML e aki ficou certo o rodape embaixo...

 

<!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=iso-8859-1" />
<title>Namoom.com.br - Para você comprar e vender de tudo!</title>
<link href="principal.css" rel="stylesheet" type="text/css" />
</head>
<style>
#main{
       height:100%;
}

#TOPO {
       width: 100%;
       height: 121px;
       background-color:red;
}
#CORPO {
       width: 100%;
       height: 100%;
       min-height: 200px;
       overflow: hidden;
       background-color: blue;
}
#RODAPE {
       height: 80px;
       width: 100%;
       background-color: yellow;
}
</style>
<body>
       <div id="main" align="center">
       <div id="TOPO">topo</div>
   <div id="CORPO">
       <p><h1>teste
       </h1>
       <p> </p>
   </div>
   <div id="RODAPE">
     <p>rodape</p>
     <p>auishdfoiuash doifuah isouf houasdhf</p>
     <p>asdfoias hdpfoiua hspdoufaphsdf</p>
     <p>asdf uai sdhofiua shdfiua shodf</p>
   </div>
</div>
</body>
</html>

 

Se nao ta certo o que ta faltando??

vlw...

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

A div conteudo (azul) excede a altura da tela e empurra o rodape (amarelo) pra baixo.

Eu queria que as tres divs aparecessem na tela sem a necessidade de rola a barra do navegador.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Pera ai, voce quer que nao exceda a tela nem na horizontal nem na vertical ????

 

Se for isso voce tem ke tratar o seguinte...

 

Nadiv conteudo adicione o seguinte

overflow:auto;
max-height:300px;

 

pra que serve isso, sempre que o conteudo for ultrapassar o tamanho 300px (eu expecifiquei passe ot amenho que quiser) ele vai criar uma barra de rolagem na DIV...

Veja se eh isso que voce ker.

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

Fiz e não deu também

O que eu necessito é assim:

Terei duas situações.

Todas as minhas páginas terão o cabeçalho (vermelho) e o rodape (amarelo) com alturas fixas.

1. Pode acontecer de a div conteudo (azul) ter pouca informação, assim o rodape deveria ficar no final da tela e esticando a div conteudo (azul)até grudar no rodape.

2. Pode acontecer de uma página ter bastante conteudo na div conteudo (azul) e neste caso esta div deve empurrar o rodape para baixo conforme cresce sua altura, colocando assim a barra de navegação vertical.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Cara não da pra esteicar o height no tamnho da tela, voce tera que pegar o tamanho da tela com JS e colocar esse tamanho no min-height da div, e deixar o height 100% sempre que for colocado um valor maior que o min height a div vai esticar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

matheusmarson    0

matheusmarson
Postado

Consegui resolver o problema.

Olha só como ficou meu código

Obrigado a todos pela colaboração

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>..:: Rodapé no Final da Página - Independente da Resolução by aprendacss.wordpress.com ::..</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html, body {
   height: 100%;
}

* html #tudo {height: 100%;}

body {
   background-color: #CCC;
}

#tudo {
   width: 90%;
   margin: 0 auto;
   text-align: left;
   position: relative;
   min-height: 100%;
   background-color: #FFF;
}

#conteudo {
   padding-bottom: 0px;
}

#rodape {
   position: absolute;
   bottom: 0;
   height: 160px;
   text-align: center;
   width: 100%;
   background-color: #0FF;
   clear: both;
}

#cabecalho {
   background-color: #FF0;
   height: 140px;
}
</style>
</head>
<body>
<div id="tudo">
<div id="cabecalho">
<h1><a href="http://aprendacss.wordpress.com">Aprenda CSS</a></h1>
</div>
<div id="conteudo">
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>
<p>Aqui vai o conteudo da página.</p>


</div>
<div id="rodape">
<p>
Todos Direitos Reservados - <a href="http://aprendacss.wordpress.com"><strong>Aprenda CSS</strong></a> - 2008
</p>
</div>
</div>
</body>
</html>

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