Как создать фиксированный нижний колонтитул в HTML и CSS

Я создал фиксированный нижний колонтитул для моего веб-сайта:

<Сильный> HTML

<div class="card footerBF">
<div class="card-body space-around">
<button
type="button"
class="buttonBF"
routerLink="/myRouter"
>
<i class="fa fa-lock fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button" class="buttonBF" routerLink="myRoute">
<i class="fa fa-plus fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>

<Сильный> CSS

.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
}

.buttonBF {
background-color: white;
color: grey;
display: inline-block;
border: none;
cursor: pointer;
}

Проблема в том, что когда я прокручиваю, мой нижний колонтитул перемещается, хотя предполагается, что он исправлен. Я прикладываю одну картинку, чтобы показать этот эффект:

Источник http://q-answer.ru/questions/kak-sozdat-fiksirovannyy-nizhniy-kolontitul-v-html-i-css-20065.html