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?