CSS min-height: 100vh 为容器底部添加额外空间

Question

I am trying to use min-height: 100vh; on my inner call to action div that sits on top of a background video. Everything works correctly, however, when I try to use 100vh with the absolutely positioned video it seems to add a block of margin to the section.

How do I both use 100vh on the section and not have the extra margin? I have tried calc, but that gets wonky with responsive and mobile devices.

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>

UPDATE

1. I have tried using min-height: calc(100vh - 5rem); and that works in Chrome on a desktop but not Safari on iOS.
2. I have come across this library https://github.com/Hiswe/vh-check but I am trying to address this with only CSS
3. I tried to utilize iOS CSS but that is not working on iPads

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

Answer 1

If you come across this and know of a better solution, trust me I am all ears.

I setup js to detect if the viewer is 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')
    }
};

Which appends this class...

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