Как протолкнуть нижний колонтитул с фиксированным дном в начальной загрузке 4 ниже содержимого страницы?

Question

Я использую класс с фиксированным дном в boostrap 4, чтобы держать нижний колонтитул в нижней части, когда нет содержимого или если содержимое меньше полной страницы. Ниже приведен CSS из начальной загрузки 4 для класса с фиксированным основанием:

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

Мой нижний колонтитул выглядит так:

<footer class=" fixed-bottom  container">
  <div class="row">
    <div class="col-md-5">
      some content
    </div>
    <div class="col-md-7">    
      some content
    </div>
  </div>
</footer>

CSS для нижнего колонтитула:

footer {
    margin-top: 25px;
}

Нижний колонтитул удобно расположен внизу, но если пользователь щелкает ссылку, которая загружает контент, который не помещается в пустое пространство на странице, появляется полоса прокрутки, и нижний колонтитул остается закрепленным поверх содержимого, скрывающего контент. Как я могу переместить нижний колонтитул ниже содержимого с помощью CSS, сохраняя при этом класс с фиксированным нижним колонтитулом в нижнем колонтитуле? Нижний колонтитул должен стать видимым, когда пользователь прокручивает страницу до конца.

Обратите внимание, что содержимое нижнего колонтитула шире, чем содержимое страницы, поэтому попытка воспроизведения с индексом z не будет работать.

Answer 1

Просто добавьте класс mb-5 (поле снизу 5) в div над нижним колонтитулом:)

Нет необходимости использовать дополнительный код CSS для вещей, которые уже встроены в Bootstrap.

Проверьте информацию о расстоянии здесь

Answer 2

Обновите свой CSS до этого.

.fixed-bottom {
    position: fixed;
    margin: auto;
    height: 100px;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

Удалить

footer {
    margin-top: 25px;
}