页脚不停留在我页面的底部

Question

我有这个页脚：

<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;
}

当页面没有滚动条时，这种方法效果很好，但是当我滚动时，页脚不会停留在滚动条的底部：

这是我的角结构：

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

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

<app-rodape></app-rodape>

app-rodape是页脚，并且在路由器出口中显示了我的表单。 表单组件具有以下结构：

<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>

如果我删除了bottom：0属性，则页脚的工作将与预期的一样，但是在没有滚动功能的其他组件中，页脚不会停留在页面的最后。

在这个项目中，我使用Bootstrap。