Rodapé corrigido no Bootstrap

86

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?

html css twitter-bootstrap footer stdcerr
fonte

Respostas:

207

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

Josh KG
fonte
Este e o comentário de @Daniel-Tero fizeram isso por mim.
jmng
4
Se uma página tiver rolagem, ela não está funcionando corretamente.
Arnab de
2
fixed-bottomnão fiz o que esperava, em vez disso fiz static-bottompara respeitar a altura do conteúdo da página.
Gjaa
7

Adicione isso:

<div class="footer fixed-bottom">
Matheus Gomes
fonte
3

Adicione z-index:-9999;a este método, ou cobrirá sua barra superior se você tiver 1.

Daniel Tero
fonte
0

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.

Sr. Porco-espinho
fonte
-4

Você pode querer verificar esse exemplo: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
fonte
2
Isso é para rodapé fixo, não rodapé fixo: /
az_
@aaronz qual é a diferença?
Arsen Ibragimov
4
@ArsenIbragimov O rodapé fixo é empurrado para o final da página se o conteúdo for mais alto do que a visualização. O rodapé fixo está sempre visível na parte inferior da visualização.
az_