Rodapé não fica no fim da página, tem um comportamento diferente para

[lotusofblack 0]

Olá a todos, será que vocês poderiam me ajudar?

Já tentei de todas as formas acertar o rodapé mais em cada página ele fica diferente, se eu colocar position : absolute , bottom: 0; em certas páginas ele vai ficar certo, em outras ele fica por cima do conteúdo e se não coloco umas páginas ficam com rodapé normal e outras com o rodapé sobrando espaço embaixo.

Segue o site que estou desenvolvendo: http://goo.gl/ADz3iR

[L. Henrique 179]

Lotus,

Você só deve atribuir o position: absolute para páginas que possuam somente uma seção e não ultrapasse disso. O HTML funciona como blocos, sempre que tiver mais conteúdo em cima, o rodapé vai ficando cada vez mais para baixo, é regra (a não ser que mude isso com CSS/JS).

Se algumas páginas ultrapassam o limite e outras não, então você vai precisar da ajuda de um jQuery pra aliviar sua situação.

O jQuery possui uma função chamada height(), ela poderá te retornar o tamanho da viewport e do seu conteúdo. Então faça o seguinte:

$(document).ready(function() {
   var tela = $(window).height();
   var conteudo = $('#navbar').height() + $('#conteudo').height();

   if ( conteudo < tela ) {
      $('#rodape').css({'position':'absolute','bottom':'0'});
   }
});

Se você não quiser somar a height do conteúdo, então adicione uma div que seja pai de tudo o que exista na página (excluso rodapé) e então calcule o height só dela. Exemplo:

<div id="conteudo">
   <nav></nav>
   <div></div>
   <section></section>
</div>
<footer>
   ...
</footer>

Ai você só chama na variável o conteudo:

var conteudo = $('#conteudo').height();

Veja aqui a DEMO. Adicionei um botão pra você interagir. Adicione mais conteúdo na div, reduza o tamanho da tela e depois clique novamente no botão e veja como o Footer se comporta.

 

Abraços!

[lotusofblack 0]

Lotus,

 

Você só deve atribuir o position: absolute para páginas que possuam somente uma seção e não ultrapasse disso. O HTML funciona como blocos, sempre que tiver mais conteúdo em cima, o rodapé vai ficando cada vez mais para baixo, é regra (a não ser que mude isso com CSS/JS).

 

Se algumas páginas ultrapassam o limite e outras não, então você vai precisar da ajuda de um jQuery pra aliviar sua situação.

 

O jQuery possui uma função chamada height(), ela poderá te retornar o tamanho da viewport e do seu conteúdo. Então faça o seguinte:

$(document).ready(function() {
   var tela = $(window).height();
   var conteudo = $('#navbar').height() + $('#conteudo').height();

   if ( conteudo < tela ) {
      $('#rodape').css({'position':'absolute','bottom':'0'});
   }
});

Se você não quiser somar a height do conteúdo, então adicione uma div que seja pai de tudo o que exista na página (excluso rodapé) e então calcule o height só dela. Exemplo:

<div id="conteudo">
   <nav></nav>
   <div></div>
   <section></section>
</div>
<footer>
   ...
</footer>

Ai você só chama na variável o conteudo:

var conteudo = $('#conteudo').height();

Veja aqui a DEMO. Adicionei um botão pra você interagir. Adicione mais conteúdo na div, reduza o tamanho da tela e depois clique novamente no botão e veja como o Footer se comporta.

 

Abraços!

 

L.Henrique, muito obrigado :D , bem interessante e mais fácil que a meio que gambiarra que acabei fazendo eu usei isso aqui: http://www.cssstickyfooter.com/br/using-sticky-footer-code.html no index e nas outras páginas, só que nas outras páginas eu criei uma classe conteudo e col-9 e defini o tamanho do conteudo ficando o css assim:

 

#footer{position: relative;

clear:both;

width: 100%;

margin: 0 auto;

padding: 20px 0}

 

.conteudo{

margin: 0 auto;

height: 772px;

min-height: 100px;

display: table;

}

 

e o col-9

 

.col-9 {width: 100%;}

 

Bom não sei se está 100% certo essa gambiarra mais serviu, seria bom se eu tivesse visto sua resposta antes quebrei muito a cabeça pra fazer isso, mesmo assim muito obrigado :D , pelo menos sei que tem um modo mais fácil e descomplicado fazer do que passar um dia e meio pra conseguir.