Publicado em 23 de jul.

Manter rodapé sempre no final

Pessoal, estou apanhando pra manter o rodapé do meu site no final dele. Na verdade eu consegui, mas ele estoura quando altera as resoluçoes ou tento dar um zoom no site... o link é http://pedrapaulista.6te.net/ já coloquei position absolute e bottom 0 na div do footer mas ficou nisso ai, ta por cima de todo o conteúdo se der zoom no site... aguardo ajuda da galera aii ahh.. também tem meu outro tópico com outro problema desse mesmo site que ainda nao resolveram, se puderem também da uma ajuda: http://forum.imasters.com.br/topic/524020-problema-com-slider-thumb-nav/ valeu

Discussão (29)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marlon Pacheco· 23 de jul.

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

http://tableless.com.br/colocar-rodape-fixo-no-bottom/

jgustavo99· 23 de jul.

Olá! Tente assim:

<style>
#rodape{
	position: absolute;
	bottom: 0;
}
</style>

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

Espero ter Ajudado ;)

bruno_mosciatti· 23 de jul.

Os dois acima chegaram a ler meu tópico por inteiro? já disse que coloquei position absolute e bottom 0 na div do rodapé...

knoxzin1· 23 de jul.

body {

 position: relative;

}

Marlon Pacheco· 24 de jul.

Eu li o post inteiro. Você leu algum dos links q eu passei?

Já tive o mesmo problema que você, e achei a solução nestes 2 links.

Mas agora já foi, o knoxzin1 já respondeu mesmo.

bruno_mosciatti· 24 de jul.

>
body {

 position: relative;
}

>
Eu li o post inteiro. Você leu algum dos links q eu passei?

Já tive o mesmo problema que você, e achei a solução nestes 2 links.

Mas agora já foi, o knoxzin1 já respondeu mesmo.

Não resolveu :/

Marlon Pacheco· 24 de jul.

html, body, container {height: 100%;}

Só faltou isso. Que também está nos 2 links passados.

bruno_mosciatti· 24 de jul.

html, body, container {height: 100%;}

Só faltou isso. Que também está nos 2 links passados.

parece que não resolveu :/

pelo menos testando pelo firebug aqui não deu... eu dou o zoom e o rodapé vai por cima de todo site

Marlon Pacheco· 24 de jul.

Acabei de testar aqui no Developer Tools do Chrome. A barra fixou no final.

Ah, coloca um position:relative; no #footer

bruno_mosciatti· 24 de jul.

>
Acabei de testar aqui no Developer Tools do Chrome. A barra fixou no final.

Ah, coloca um position:relative; no #footer

Ao invés do absolute, ficaria relative?

Bom... não adiantou ://

tá bem zicado por conta desse bootstrap maldito =( hehe

Marlon Pacheco· 24 de jul.

Estranho. Testei isso agora no Chrome e funcionou.

Acho uma boa tu escrever o teu próprio CSS.

bruno_mosciatti· 24 de jul.

>
Estranho. Testei isso agora no Chrome e funcionou.

Acho uma boa tu escrever o teu próprio CSS.

Testei e não deu muito certo...

com o position:relative; ficou um pouco melhor, pelo menos não vai por cima do conteúdo.. só que fica com espaço em branco depois do rodapé caso eu dê zoom...

Marlon Pacheco· 24 de jul.

Só me explica o motivo do usuário dar zoom?

Independente disso, o espaço pode ser problema de outro elemento. Verifica o motivo de o .container ficar com esse espaço no final.

bruno_mosciatti· 24 de jul.

>
Só me explica o motivo do usuário dar zoom?

Independente disso, o espaço pode ser problema de outro elemento. Verifica o motivo de o .container ficar com esse espaço no final.

testar as resoluções...

Marlon Pacheco· 24 de jul.

Perae, tu tá testando com ZOOM?? Não é mais fácil pelo Ctrl+Shift+M (se você estiver utilizando o Firefox)?

Até onde sei, a resolução permanece a mesma quando é aplicado o zoom.

bruno_mosciatti· 24 de jul.

>
Perae, tu tá testando com ZOOM?? Não é mais fácil pelo Ctrl+Shift+M (se você estiver utilizando o Firefox)?

Até onde sei, a resolução permanece a mesma quando é aplicado o zoom.

é, equivoco meu!

Testei como sugeriu, ficou +/- na mesma..

com o position:absolute ele toma a frente do conteúdo;

com o position:relative ele fica com um espaço em branco após ele, não fica no final

Vitor RC· 24 de jul.

Nao sei se entendi '-' mas uso:

#divVAZIAacimaDOrodape{
 clear:both;

}
#rodape{
 propriedades rodape
}

Assim, quando dá zoom, o rodapé nao fica por cima ou abaixo dos elementos '-', aqui funciona.

No codigo faz assim:

<div id='divVAZIAacimaDOrodape'></div>

<div id='rodape'>Direitos resrvados. Pedra paulista</div>

Agora para o rodapé ficar sempre no final do site eu uti

body {

	position: relative;
	}

#rodape {
	position: absolute;
	bottom: 0;
	}

'-'

lizo:

bruno_mosciatti· 25 de jul.

opa, melhorou!

já tá se poscionando exatamente no final do site, o único problema ainda é o zoom...

já atualizei no site

http://pedrapaulista.6te.net/

Vitor RC· 25 de jul.

O problema é que o rodapé sobe, e cobre o conteudo do site?

Tenta utilizar media-queries entao se nao conseguir.

jgustavo99· 25 de jul.

Olá Boa Noite! Tente tirar o bottom: 0; do seu CSS do Rodapé (#footer).Testei no Link que você postou (http://pedrapaulista.6te.net/) e funcionou :)

Espero ter Ajudado ;)

Vitor RC· 27 de jul.

>
Olá Boa Noite! Tente tirar o bottom: 0; do seu CSS do Rodapé (#footer).Testei no Link que você postou (http://pedrapaulista.6te.net/) e funcionou :)

Espero ter Ajudado ;)

Ele ja tinha colocado bottom:0 '-'

Mas acho mesmo que o problema ai é que se voce observar quando dá zoom, seu site desconfigura o layout.

Talvez primeiro deva arrumar isso, para depois testar o rodapé.

Ou se queira testar mesmo assim, lembra a div antes do rodapé que tem um CLEAR:BOTH?

Então coloque um !important, as vezes alguma outra regra esta a cubrir esta.

#limparRodape {
 clear:both; !important

}

bruno_mosciatti· 28 de jul.

>
Olá Boa Noite! Tente tirar o bottom: 0; do seu CSS do Rodapé (#footer).Testei no Link que você postou (http://pedrapaulista.6te.net/) e funcionou :)

Espero ter Ajudado ;)

não muda muita coisa, mas fica um espaço em branco pra baixo do rodapé;

Ele ja tinha colocado bottom:0 '-'

Mas acho mesmo que o problema ai é que se voce observar quando dá zoom, seu site desconfigura o layout.

Talvez primeiro deva arrumar isso, para depois testar o rodapé.

Ou se queira testar mesmo assim, lembra a div antes do rodapé que tem um CLEAR:BOTH?

Então coloque um !important, as vezes alguma outra regra esta a cubrir esta.

#limparRodape {
 clear:both; !important

}

não mudou =/

stromdh· 31 de jul.

cara, cheguei atrasado, mas a dica pode ser boa. Quando uso o bootstrap sigo esse lance aqui:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vitor RC· 1 de ago.

É claro.

Quando voce indica bottom:0; o elemento ficará SEMPRE no final da pagina, assim MESMO dando zoom, ele irá seguir o final da página.

Como se ele estivesse colado ao seu navegador, mesmo que voce role pra cima e pra baixo dando zoom ele irá continuar no final.

bruno_mosciatti· 4 de ago.

>
É claro.

Quando voce indica bottom:0; o elemento ficará SEMPRE no final da pagina, assim MESMO dando zoom, ele irá seguir o final da página.

Como se ele estivesse colado ao seu navegador, mesmo que voce role pra cima e pra baixo dando zoom ele irá continuar no final.

se tivesse acontecendo isso, seria o certo... mas quando eu abro o site com a janela reduzida, por exemplo, o rodapé fica no meio do conteúdo