Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia povo...
Sei que tem muita coisa sobre esse assunto por ai, e que deveria ser uma coisa simples mas eu não consigo de jeito nenhum fazer o rodapé ficar no final da página, acompanhando qualquer tamanho de conteúdo.
Essa é a estrura das minhas páginas:
<!--Inicia o Site-->
<div id="container">
<div id="cabecalho">
<div id="menu"><?php include("menu.php");?></div>
...
</div>
<!--Inicia o Conteudo-->
<div id="principal">
... páginas
</div>
<div id="rodape">
...
</div><!--Termina Rodape-->
</div><!-- Termina o Site-->E esse é o css com a tentaiva mais divulgada por ai (negrito), mais as propriedades que preciso pro meu site.:
<style type="text/css">
html, body {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
[b]height: 100%; [/b]
}
#container{
text-align: left;
margin: auto;
background-color: #FEFAEB;
[b]min-height: 100%;
position: relative;[/b]
}
#cabecalho{
background-color: #A2B5CD;
color: #036;
font-size:22pt;
padding: 0px 0px 0px 0px;
font-family: Verdana;
}
#menu{
background-color: #FEFAEB;
color: #036;
font-size:9pt;
font-family: Verdana;
margin-right: 0px;
}
#principal{
margin-left: 20px;
margin-right: 20px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
[b]padding-bottom: 30px;[/b]
font-family: Verdana;
font-size: 8pt;
color: #036;
background-color: #FEFAEB;
}
#rodape{
[b] position: absolute;
bottom:0;[/b] background-color: #A2B5CD ;/*#FEFAEB; */
text-align:right;
font-family: Verdana;
font-size: 8pt;
color: #036;
[b]width:100%;
height:30px;
clear: both; [/b]
margin-right:20px;
margin-top:20px;
padding-top:10px
}
</style>Desse jeito o rodapé fica por cima do conteúdo que ultrapassa o tamanho da tela.
Sem as propriedades em negrito, quando o conteúdo é pouco o rodapé termina logo abaixo, no meio da página... quando é muito fica certo.
Alguma dica?
Obrigada!
>
isto pode estar acontecendo por causa do Position relative no container ou Position Absolute no rodapé.
Tire e verá o resultado.
---
E.. se não me engano, você postou na área errada.
Pois é João. já tentei também assim... ai quando o conteúdo é pouco o rodapé termina logo abaixo, no meio da página... quando é muito fica certo. Depois tentei inverter o relative e absolute e piorou :/
Foi mal... não achei uma área pra css.. e não sei onde pode se encaixar melhor, mas podem mover pra qualquer canto :D
Para o rodapé ficar no final, você terá que ter uma div que leve ele até lá (pelo menos, é assim que eu faço); ou seja, uma div onde o tamanho dela chega até lá embaixo.
Segue um link para você estudar: Clique aqui
EDIT:
Vamos supor que você queira definir o tamanho da div que fique o conteudo do site.
Ex:
Quero que a div fique com 500px, para chegar até o rodapé, porém, se o conteúdo do site for maior do que isso, vai dar m*****.
Para arrumar, use min-height. Logo, o minimo será 500px, e se passar disso, a div acompanha o conteúdo :D
Obrigada,
Li mais um pouco, e pelo que entendi, eu realmente quero que minha div rodapé seja posicionada em relação a div pai, que é a container.
Também quero que minha div principal (= conteúdo) se extenda até o rodapé, por isso tirei o min-height que estava no container, e coloquei na div principal.
Quase deu certo, mas em telas que ultrapassam a altura, o rodapé acompanha, porém sobrepõe um pouco a div principal. Se mexo na margin-bottom da principal, a margem fica em baixo do rodapé.
Afinal, acho que não etendi coisa nenhuma.
Outra coisa... Como vou saber qual o mínimo de px para cada monitor? Tentei colocar com % mas não funcionou.
Ops...
Tirei o bottom:0 do rodapé e ficou tudo certo.
Agora só preciso saber como defnir o min-height para que funcione em qualquer tamanho de tela.
isto pode estar acontecendo por causa do Position relative no container ou Position Absolute no rodapé.
Tire e verá o resultado.
---
E.. se não me engano, você postou na área errada.