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][1]][1] [1]: https://i.sstatic.net/TZ0IB.png 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.