[Resolvido] Div fixa no rodapé

[DiFalco 0]

Galera,

 

Estou precisando colocar um rodapé que fique fixo na base da página, independente da rolagem ou não. Essa div inclusive ficará sobre o conteúdo da página principal.

 

Alguém poderia me ajudar com isso?

 

Abs

[allex_carvalho 124]

Veja esse tutorial

[DiFalco 0]

nao era esse problema nao, é mais ou menos como nesse exemplo aqui: http://www.vascalindas.com.br/

 

a barra de notícias fica sempre visível mas fixa no fundo da página...

[Nícolas Luís Huber 14]

Definição da propriedade position com o valor de fixed: "The element is positioned relative to the browser window" (http://www.w3schools.com/cssref/pr_class_position.asp). Ou seja o elemento que receber um position do tipo fixed ficara posicionado a um distância relativa da janela do browser, independente de haver ou não o scroll da página. Exemplo:

 

html

<!-- Break Line para dar espaço, criando o scroll da página -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<footer class="footer">
2001-2012
</footer>

 

css

.footer {
 position: fixed;
 bottom: 0;
 padding: 10px;
 background: rgba(0,0,0,0.6);
}

[DiFalco 0]

Nicolas, era isso mesmo!!! vlw!!!

 

agora, to tentando colocar no css dele para a div ficar centralizada e nao estou conseguindo, sabe como resolver isso???

 

Abs

[allex_carvalho 124]

Você vai precisar de uma div dentro da footer. Cria uma div centro e coloca a largura fixa e margin 0 auto.

[Nícolas Luís Huber 14]

Para ficar centralizado, precisa criar uma div dentro da .footer, segue o exemplo:

 

css

.footer {
 width:  100%;
 position: fixed;
 bottom: 0;
}
.footer-content {
 width: 950px;
 margin:  0 auto;
 background: rgba(0,0,0,0.6);
 padding: 10px;
}

 

html

<!-- Break Line para dar espaço, criando o scroll da página -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<footer class="footer">
<div class="footer-content">
   2001-2012
</div>
</footer>

 

Acho que é isto!

[DiFalco 0]

agora ficou perfeito!!!

 

Obrigado mesmo, pessoal!!!