Ir para conteúdo

POWERED BY:

Arquivado

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

divertoso

como deixar a div 'conteudo' elastica?

Por , em Desenvolvimento frontend

Recommended Posts

divertoso    0

divertoso
Postado

salve galera

 

estou fazendo um layout simples (topo,menu,conteudo,rodape)

Ja consegui alinhar as divs, só esta faltando deixar as divs de menu e conteudos ocupando 100% de height (que alias, nao funciona essa msm opção no css)

 

htmlduvida.jpg

 

Uploaded with ImageShack.us

 

AQUI O CODIGO:

 

<!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>Untitled Document</title>

<style type="text/css">

html, body{
text-align:center;
height:100%;
margin:0;
}


#principal{
background-color:#666;
width:700px;
margin:0 auto;
min-height:100%;
position:relative;
text-align:left;
}

#topo{
background-color:#99FFFF;
height:100px;
}	

#menu{
background-color:#CC3399;
width:200px;
float:left;
padding-bottom:100px;
}	

#conteudo{
background-color:#FF9933;
float:right;
padding-bottom:100px;
width:500px;

}


#rodape{
background-color:#F66;
height:100px;
clear:both;
position:absolute;
bottom:0;
margin-bottom:0;
width:700px;

}

</style>

</head>

<body>

   <div id="principal">

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

       <div id="menu">menu</div>

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

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

   </div>

</body>

</html>

 

alguem pode me dar uma luz? vlws galera

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Siga este tuto:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

divertoso    0

divertoso
Postado

 

cara, tentei adicionar as informaçoes desse tutorial mas ainda nao deu certo:

 

(basicamente, englobei em uma div o menu,conteudo, e a div de limpeza) puis um padding-bottom:100px; achei que fosse isso que deixaria o corpo elastico, mas nao deu certo...

 

<!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>Untitled Document</title>

<style type="text/css">

html, body{
       text-align:center;
       height:100%;
       margin:0;
}


#principal{
       background-color:#666;
       width:700px;
       margin:0 auto;
       min-height:100%;
position:relative;
       text-align:left;
}

#topo{
       background-color:#99FFFF;
       height:100px;
}       

#corpo{
padding-bottom:100px;
}

#menu{
       background-color:#CC3399;
       width:200px;
       float:left;
       padding-bottom:100px;
}       

#conteudo{
       background-color:#FF9933;
       float:right;
       padding-bottom:100px;
       width:500px;

}

#limpeza{
clear:both;
}

#rodape{
       background-color:#F66;
       height:100px;

       position:absolute;
       bottom:0;
       margin-bottom:0;
       width:700px;

}

</style>

</head>

<body>

   <div id="principal">

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

	<div id="corpo">
		<div id="menu">menu</div>

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

		<div id="limpeza"></div>
	</div>

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

   </div>

</body>

</html>

 

mais alguem tem alguma ideia?

vlwss

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Rosario    4

Rafael Rosario
Postado

Ve se atende ao que você quer:

 

 


<!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>Teste layout</title>

<style type="text/css">

#tudo{

height:100%;
height:100%;	
}

#topo{

width:700px;
height:100px;
margin:auto;

}

#topo .menu{

width:700px;
height:auto;
margin:auto;


}

#conteudo{

width:700px;
height:auto;
margin:auto;

}

#rodape{

width:700px;
height:auto;
margin:auto;

}



</style>

</head>

<body>


  <div id="tudo">

   	<div id="topo">

           <div class="menu">

           </div>

       </div>

       <div id="conteudo">



       </div>

       <div id="rodape">



       </div>

  </div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago nave    0

Thiago nave
Postado 

<!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>Untitled Document</title>

<style type="text/css">

html, body{
       text-align:center;
       height:100%;
       margin:0;
}


#principal{
       background-color:#666;
       width:700px;
       margin:0 auto;
       min-height:100%;
position:relative;
       text-align:left;
}

#topo{
       background-color:#99FFFF;
       height:100px;
}       

#menu{
       background-color:#CC3399;
       width:200px;
       float:left;
       padding-bottom:100px;
}       

#conteudo{
       background-color:#FF9933;
       float:right;
       padding-bottom:100px;
       width:500px;

}


#rodape{
       background-color:#F66;
       height:100px;
       clear:both;
       bottom:0;
       margin-bottom:0;
       width:700px;

}

</style>

</head>

<body>

   <div id="principal">

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

       <div id="menu">
         menu
       </div>

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

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

   </div>

</body>

</html>

 

Vê se de ajuda eu sou tirei o position:absolute; pois assim de acordo com que você inserir o conteúdo seu rodapé vai vem descendo. ate preencher tudo

Compartilhar este post

Link para o post
Compartilhar em outros sites

divertoso    0

divertoso
Postado

galera...acabei de entender a solução do maujor, o ideal seria deixar como esta (as colunas centrais irem crescendo de acordo com seu proprio conteudo) a separar essas divs atraves de background-image no fundo da tela 'principal' (essa sim é a div elastica ja que contem margin:0 auto)

 

ficaria algo assim:

 

principal{
       background-color:#666;
background: url("01.jpg") repeat-y scroll left ;	
       width:700px;
       margin:0 auto;
       min-height:100%;
       position:relative;
       text-align:left;
}

 

(depois posto um print)

obrigado pela ajuda thiago, rafael e william.... é nois!!

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