Skip to main content
idem
Fonte Link
brasofilo
  • 6,7mil
  • 5
  • 30
  • 50

Rodapé Absolute Bottom - Como fazer o Footer ficar no rodapé após usar AJAX?

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?

@EDIT

Apenas complementando, talvezTalvez o problema seja que nesse projeto eu estou trabalhando com o carregamento de uma PartialView via AjaxAJAX.

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?

Rodapé Absolute Bottom - AJAX

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?

@EDIT

Apenas complementando, 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?

Como fazer o Footer ficar no rodapé após usar AJAX?

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?

adicionou 1244 caracteres ao conteúdo; tags editadas
Fonte Link
Rafael Barbosa
  • 2,8mil
  • 1
  • 17
  • 37

Como fazer o Footer ficar Rodapé Absolute Bottom? - AJAX

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?

@EDIT

Apenas complementando, 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?

Como fazer o Footer ficar Absolute Bottom?

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?

Rodapé Absolute Bottom - AJAX

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?

@EDIT

Apenas complementando, 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?

Título descritivo. Use `` somente para código e similares.
Fonte Link
brasofilo
  • 6,7mil
  • 5
  • 30
  • 50

Como fazer o Footer ficar Absolute Bottom?

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

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?

Footer Absolute Bottom

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?

Como fazer o Footer ficar Absolute Bottom?

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?

Fonte Link
Rafael Barbosa
  • 2,8mil
  • 1
  • 17
  • 37
Carregando