Estou testando o Bootstrap e gostaria de saber como posso corrigir o rodapé na parte inferior sem que desapareça da página se o conteúdo for rolado?
Respostas:
Para obter um rodapé que grude na parte inferior da janela de visualização, defina uma posição fixa como esta:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
O bootstrap inclui este CSS na seção Navbar> Placement com a classe fixed-bottom
. Basta adicionar esta classe ao seu elemento de rodapé:
<footer class="fixed-bottom">
Documentos de bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
fixed-bottom
não fiz o que esperava, em vez disso fiz static-bottom
para respeitar a altura do conteúdo da página.
Adicione isso:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDIT: a classe navbar-fixed-bottom
foi alterada para a fixed-bottom
partir do Bootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
Adicione isso:
<div class="footer fixed-bottom">
Adicione z-index:-9999;
a este método, ou cobrirá sua barra superior se você tiver 1
.
Você pode fazer isso envolvendo o conteúdo da página em um div com o seguinte estilo de ID aplicado:
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
Funcionou para mim.
Você pode querer verificar esse exemplo: http://getbootstrap.com/2.3.2/examples/sticky-footer.html