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

Question

I have done several applications and 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;
}

However, this time it’s not working. How could I be proceeding to keep my footer at the bottom of the page?

Maybe the problem is that in this project I am working with the shipment of a 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 the PartialView into the <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>   

I mean, I think because I only carry a piece of code, say, man, container with position:relative does not push the baseboard down.

Some solution?

Answer 1

Good afternoon Rafael, you probably forgot (I don’t know how to use technical language) but, probably went white and did not remember that a position:absolute is always accompanied by a parent encapsulator with position:relative and then just determine for your footer the property bottom:0 in the CSS as demonstrated in the example that follows the link below:

http://jsfiddle.net/okzo9a0y/

I put a height for the example on the link but anyway your footer whether you own the CSS or not, you’ll always be at the bottom of your page.

Hugs.