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

Posted on

Question :

I have already made several applications and have always used the method below to regulate the height of footer . Always using Bootstrap.


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


#footer .navbar{
  position: absolute !important;


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.


 function Open(url) {
        url = '@Url.Content("~/")' + url;
            url: url,
            type: 'GET',
            success: function (response) {
            error: function () {
                alert('Ocorreu um erro!');

    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 id="footer">
       Hi-Nutrition 2014

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?


Answer :

Good afternoon Rafael, you probably forgot (I do not know how to use technical language) but probably gave 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 CSS as I demonstrated in the example that follows the link below:


I put a height for the example in the link but anyway its footer independent whether it has CSS property or not, will always be positioned at the bottom of your page.



Leave a Reply

Your email address will not be published. Required fields are marked *