Skip to main content
1 de 2
veroneseComS
  • 2,8mil
  • 5
  • 36
  • 101

Footer não permanece no final da página

Tenho o seguinte footer:

<footer class="page-footer font-small footer-fundo-cinza">
    <div class="container">
        <div class="row pt-3">
            <div class="col-md-4">
             ...
            </div>
         </div>
    </div>
</footer>


footer{
  position: absolute;
  width: 100%;
  bottom: 0;
}

Ele funciona bem quando a página não possui scroll, porém quando possui scroll ele não fica no final do scroll, ele fica no final da primeira página, exemplo:

inserir a descrição da imagem aqui

Essa é minha estrutura angular:

<div>
  <app-cabecalho></app-cabecalho>
</div>

<router-outlet (activate)="onActivate($event)"></router-outlet>

<app-rodape></app-rodape>

O app-rodape é o footer e no router-outlet é mostrado o formulário da imagem.

O componente de formulário possui a seguinte estrutura:

<div class="container">

    <div class="row justify-content-md-center">
        <div class="col col-lg-8">
            <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <p class="divisor is-3"><span>preencha o formulário abaixo</span></p>
                    </div>
                </div>

Se eu retirar a propriedade bottom: 0 o footer é posicionado no final do documento, porém nas outras telas onde não possui scroll ele não permanece no final da tela.

Neste projeto está sendo usado o bootstrap.

veroneseComS
  • 2,8mil
  • 5
  • 36
  • 101