MDbootstrap Угловой коллапс наложения нижнего колонтитула

Question

Я создаю веб-приложение с Angular + MDBootstrap, и у меня возникают проблемы с колонтитулами и сбоями. Есть ли какой-нибудь способ сделать нижний колонтитул на дне, тогда он рухнул, и я уверен, что есть способ. Также я не заинтересован, чтобы нижний колонтитул был липким.

Синий - нижний колонтитул, Серые карты - из коллапса

Footer:

<app-footer class="page-footer center-on-small-only pt-0 mt-5"></app-footer>

Сворачивание:

<div class="" [mdbCollapse]="isCollapsed" #signCategory0="bs-collapse">

          <div *ngFor="let category of signs[0]['tree']">

            <div class="card card-body hoverable mt-1 ket-item" *ngIf="isObject(category)">
              <small>

                <strong>
                  {{isObject(category)}}
                </strong>
              </small>
            </div>
            <div *ngFor="let s of category[isObject(category)]; let i = index ">

              <!--category[isObject(category)]-->

              <div class="row" *ngIf="i % 3 === 0">
                <div class="col-md-4 my-2 col-12 col-sm-8 mx-auto col-lg-4 col-xl-4">

                  <div class="card animated fadeIn sign-card hoverable"
                       *ngIf="category[isObject(category)][i]">
                    <!-- Card image -->
                    <div class="sign-img-row">
                      <img
                        *ngIf="category[isObject(category)][i].image"
                        class="card-img-top"
                        [src]="'/assets/signs/'+category[isObject(category)][i].image"
                        alt="Card image cap">
                    </div>

                    <div class="card-body">

                      <p class="card-text">{{category[isObject(category)][i].text}}</p>

                    </div>

                  </div>
                </div>