3

Já fiz várias aplicações e sempre utilizei o método abaixo para regular a altura do footer. Sempre utilizando Bootstrap.

HTML

<div id="footer">
  <div class="navbar navbar-fixed-bottom">
     <div id="rodape">Hi-Nutrition 2014</div>
  </div>
</div>  

CSS

#footer .navbar{
  position: absolute !important;
}

#rodape{
  text-align:center;
  background:#a3a3a3;
  color:white;
  bottom:0;
  position:absolute;
  width:100%;
  margin-bottom:0;
}

Porém, dessa vez não está funcionando. Como poderia estar procedendo para manter meu footer no final da página?

Talvez o problema seja que nesse projeto eu estou trabalhando com o carregamento de uma PartialView via AJAX.

SCRIPT

 function Open(url) {
        Carregar();
        url = '@Url.Content("~/")' + url;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#corpoConteudo').html(response);
                $('#loader').remove();
            },
            error: function () {
                alert('Ocorreu um erro!');
                $('#loader').remove();
            }
        });
    }

    function Carregar() {
        $('#corpoConteudo').append('<div id="loader"></div>');
    }

Esse script carrega a PartialView para dentro da <div id="corpoConteudo"></div> e após esse elemento, estou chamando meu footer.

    <div class="container">
       <div id="corpoConteudo"></div>
       </div>
    </div>
    <div id="footer">
       Hi-Nutrition 2014
    </div>   

Ou seja, acredito que por carregar apenas uma parte do código, digamos, meu container com position:relative não empurra o rodapé para baixo.

Alguma solução?

1 Resposta 1

4

Boa tarde Rafael, você provavelmente se esqueceu (não sei usar linguagem técnica) mas, provavelmente deu branco e não lembrou que um position:absolute é sempre acompanhado de um encapsulador pai com position:relative e depois basta determinar para seu footer a propriedade bottom:0 no CSS como demonstrei no exemplo que segue o link abaixo:

http://jsfiddle.net/okzo9a0y/

Coloquei um height para o exemplo no link mas de qualquer forma o seu footer independente se tiver propriedade no CSS ou não, estará sempre posicionado no fundo da sua página.

Abraços.

2
  • 1
    Muito obrigado pela resposta. Fiz um teste fora do meu projeto e realmente funcionou. Porém, ao aplicar no meu escopo, tive problemas pelos motivos que acrescentei em minha postagem. Commented 19/08/2014 às 17:24
  • Se o footer não está sendo empurrado, será que os estilos estão abaixo da requisição AJAX? Inline por exemplo ou carregando só uma parte dos estilos? Commented 19/08/2014 às 17:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .