Ir para conteúdo

POWERED BY:

Arquivado

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

edison.silva

Rodapé Ultrapassando a página - Não Acompanha o Conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

edison.silva    0

edison.silva
Postado

Ola Pessoal,

Tenho o Layout abaixo mas o rodapé ultrapassa o conteúdo da página quando por exemplo aumento o zoom..

Gostaria que ele ficasse "colocado" no final da pagina acompanhando o conteúdo

Alguém poderia ajudar por favor..

segue o código:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Controle de Gastos Pessoais</title>
<!-- importação do CSS principal-->
<link rel="stylesheet" href="css/estilo.css" type="text/css">
</head>

<body>
<div id="tudo">
   	  	<div id="topo">        
        </div><!-- Fim div topo-->
       
      <div id="conteudo">
        <div id="colEsq">
           Coluna do Menu
         <ul id="menu">
            Menus e SubMenus
         </ul>
       </div><!-- Fim div colEsq-->
        
        <div id="colDir">
      	Conteudo dos Forms
      </div>    
    </div><!-- Fim div Conteudo-->
    
  	<div id="rodape">
      	Conteudo do Rodapé
    </div>  
</div><!-- Fim div tudo-->
    
</body>
</html>

CSS:

body{
	padding: 0px;
	margin: 0px;
	height: 100%;
	background:#CCC;
	}

#tudo{
	width:960px;
	margin:0 auto;
	
 }
#conteudo{ 
     width:960px;
	 background:#930;
	 padding-bottom: 30px;
	
	 
}
#topo{
     width:960px;
	 height:83px;
	 margin:0 auto;
	 background:#069;	
}
#colEsq{
     width:150px;
	 height:450px;
	 float:left;
	 background:#999;
}
#colDir{
     width:810px;
	 height:450px;
     float:left;
	 background:#FFF;
   } 
#rodape{
	position: absolute;
	width: 960px;
	height: 50px; /*ajusta a altura do rodapé*/
	bottom: 0px;
	background-color: #069;
	border-top: 2px solid #00C;
		
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Não precisa por absolute.

No css do rodape, tira o "position" e o "bottom" e acrescenta apenas um "clear:both;"

 

Exemplo:

#rodape{
    width: 960px;
    height: 50px; /*ajusta a altura do rodapé*/
    clear: both; /*aqui é para dar clear nos floats que você usou, se não a div iria "bugar" */
    background-color: #069;
    border-top: 2px solid #00C;     
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado

Veja as alterações que fiz:

 

 

<div id="tudo">
    <div id="topo">
        Cabeçalho
    </div> <!-- /div#topo -->
 
    <div id="conteudo">
        <div id="colEsq">
            Coluna esquerda
        </div> <!-- /div#topo -->
 
        <div id="colDir">
            Coluna direita
        </div> <!-- /div#topo -->
    </div> <!-- /div#conteudo -->
 
    <div id="rodape">
        Conteúdo do rodapé
    </div> <!-- /div#topo -->
</div>

 

 

#tudo {
    width: 960px;
    margin: 0 auto;
}
 
#topo {
    width: 960px;
    height: 83px;
    float: left;
    background: #069;
}
 
#conteudo {
    width: 960px;
    float: left;
    background: #930;
    padding-bottom: 30px;
}
 
#conteudo #colEsq {
    width: 150px;
    height: 450px;
    float: left;
    background: #999;
}
 
#conteudo #colDir {
    width: 810px;
    height: 450px;
    float: left;
    background: #F00;
}
 
#rodape {
    width: 960px;
    height: 50px;
    background: #069;
    border-top: 2px solid #00C;
    float: left;
}

 

A forma que você fez tem muita "gambiarra". Acredito que agora esteja melhor.

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