Eu queria um rodapé flexível , e é por isso que vim aqui. As melhores respostas me levaram na direção certa.
O rodapé atual do Bootstrap 3 css (tamanho fixo) atual (2 de outubro de 16) fica assim:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Desde que o rodapé tenha um tamanho fixo, a margem inferior do corpo cria um empurrão para permitir que um bolso fique no rodapé. Nesse caso, os dois estão configurados para 60px. Mas se o rodapé não for fixo e exceder a altura de 60 px, ele cobrirá o conteúdo da página.
Tornar flexível: exclua a margem do corpo css e a altura do rodapé. Em seguida, adicione JavaScript para obter a altura do rodapé e defina o marginBottom do corpo. Isso é feito com a função setfooter (). Em seguida, adicione ouvintes de eventos para quando a página for carregada pela primeira vez e ao redimensionar a execução do setfooter. Nota: Se o rodapé tiver um acordeão ou qualquer outra coisa que acione uma alteração de tamanho, sem redimensionar a janela, você deverá chamar a função setfooter () novamente.
Execute o trecho e, em seguida, tela cheia para demonstrá-lo.
function setfooter(){
var ht = document.getElementById("footer").scrollHeight;
document.body.style.marginBottom = ht + "px";
}
window.addEventListener('resize', function(){
setfooter();
}, true);
window.addEventListener('load', function(){
setfooter();
}, true);
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* additional style for effect only */
text-align: center;
background-color: #333;
color: #fff;
}
body{
/* additional style for effect only not needed in bootstrap*/
padding:0;
margin: 0;
}
<div>
Page content
<br> <br>
line 3
<br> <br>
line 5
<br> <br>
line 7
</div>
<footer id="footer" class="footer">
<div class="container">
<p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
</div>
</footer>