CSS min-height: 100vh добавить дополнительное место на дно контейнера

Question

Я пытаюсь использовать min-height: 100vh; в своем внутреннем div призыве к действию, который находится поверх фонового видео. Все работает правильно, однако, когда я пытаюсь использовать 100vh с абсолютно позиционированным видео, кажется, добавляет блок поля в раздел.

Как мне использовать 100vh в разделе и не иметь дополнительного поля? Я попробовал cal c, но это становится проблематичным с адаптивными и мобильными устройствами.

CSS

...
  .video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .video-background {
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: 100%;;
    }
  }

  .content-wrapper {
    @include media-breakpoint-up(xs) {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 0;
      margin: 0;
    }
  }
...

.section-call-to-action {
  @include media-breakpoint-up(xs) {
    min-height: 100vh;
    padding: 0;
    margin: 0;

    .row {
      margin: 0;
      padding: 0;
    }
  }
...

HTML

<div class="video-wrapper">
  <video autoplay="" class="video-background" loop="" muted="" playsinline="">
    <source src="..." type="video/mp4">
  </video>
</div>
<main class="container-fluid content-wrapper">
  <section class="container-fluid d-flex flex-column flex-fill justify-content-center section-call-to-action">

  </section>
  <section class="container-fluid d-flex flex-column section-venn-wrapper">

  </section>
  <section class="container-fluid section-robot-friends">

  </section>
</main>

ОБНОВЛЕНИЕ

1. Я пытался использовать min-height: calc(100vh - 5rem);, и это работает в Chrome на рабочем столе, но не в Safari на iOS.
2. Я сталкивался с этой библиотекой https://github.com/Hiswe/vh-check, но я пытаюсь решить эту проблему только с CSS
3. Я пытался использовать iOS CSS, но это не работает на iPad

  @supports (-webkit-overflow-scrolling: touch) {
    min-height: calc(100vh - 200px);
  }

Answer 1

Если вы столкнетесь с этим и узнаете о лучшем решении, поверьте мне, я весь слух.

Я настраиваю js, чтобы определить, является ли зритель ios ...

export default () => {
  const $sectionCallToAction = $('.section-call-to-action');
  const $iOS = navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;

    if ($iOS) {
    $sectionCallToAction.addClass('section-call-to-action-ios')
    }
};

Который добавляет этот класс ...

.section-call-to-action-ios {
  min-height: 100vh !important;
  padding: 200px 0 0 0 !important;
  margin: -200px 0 0 0 !important;
}