Você precisa agrupar sua .container-fluid
div para que seu rodapé fixo funcione, mas também faltam algumas propriedades em sua .wrapper
classe. Tente o seguinte:
Remova o padding-top:70px
da sua body
tag e inclua-o no seu .container-fluid
lugar, da seguinte maneira:
.wrapper > .container-fluid {
padding-top: 70px;
}
Temos que fazer isso porque pressionar a body
barra para baixo para acomodar a barra de navegação acaba empurrando o rodapé um pouco mais (70px mais) além da janela de visualização, para obter uma barra de rolagem. Nós obtemos melhores resultados pressionando a .container-fluid
div.
Em seguida, temos que remover a .wrapper
classe fora de sua .container-fluid
div e envolvê- #main
la com ela, da seguinte forma:
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="push"></div>
</div>
</div>
Seu rodapé, é claro, deve estar fora da .wrapper
div, remova-o da div `.wrapper e coloque-o do lado de fora, da seguinte forma:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
Depois que tudo estiver pronto, empurre o rodapé adequadamente para mais perto da sua .wrapper
classe usando uma margem negativa, da seguinte forma:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
E isso deve funcionar, embora você provavelmente precise modificar algumas outras coisas para fazê-lo funcionar quando a tela for redimensionada, como redefinir a altura da .wrapper
classe, assim:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}