How to make Footer stand in the footer after using AJAX?

I have already made several applications and have always used the method below to regulate the height of footer . Always using 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;
}

But this time it is not working. How could I be doing to keep my footer at the bottom of the page?

Maybe the problem is that in this project I'm working with loading 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>');
    }

This script loads PartialView into <div id="corpoConteudo"></div> and after that element, I'm calling my footer.

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

That is, I believe that by loading only a portion of the code, let's say my container with position:relative does not push the footer down.

Any solution?