my web app is made in Vue so of course things are split up into components.

So as you can see here, Inside my router-view, when I show a popup that I want to take up the entire screen, it only takes up part of it as the nav bar is rendered and that takes up 10vh.

You can see it here:

So I know there is one way of fixing it:

1. Move the popup div to the App.vue file and use $emit to tell it to show when the button is pressed. Since it is in the App.vue file, it will take up 100vh.

However I'm wondering if there is anything easier I can do to simply make the div take up the full screen, even though it's in the router view and not at the top level?

Code example (the overlay and one of the list items):

 <!-- MOBILE MORE INFO POP UP OVERLAY -->

    <transition name="fade" mode="out-in">

      <div class="mobile-popup-overlay" v-if="currentService != '' && $mq === 'sm'"></div>

    </transition>

    <!-- MOBILE MORE INFO POP UP -->

    <!-- COVID POPUP -->

    <transition name="fade" mode="out-in">

      <div class="popup-item" v-if="currentService === 'COVID-19' && $mq === 'sm'">

        <div class="popup-item__wrapper" :class="$mq">

          <div class="popup-item__icon-container new-service" :class="$mq">

            <i class="fas fa-shield-virus icon" :class="$mq"></i>

          </div>

          <div class="popup-item__description" :class="$mq">

            <h3 :class="$mq">COVID-19 Security</h3>

            <h4 class="new-service__p">NEW SERVICE</h4>

            <p>

              <b>COVID-19 Temperature Screening System</b>

            </p>

            <button class="tag-btn-blue-full" :class="$mq">Enquire</button>

            <button class="tag-btn-green-secondary" :class="$mq">More Info</button>

            <button class="popup-item__description__mobile-button" @click="changeService('close')">

              <i class="fas fa-times"></i>

            </button>

          </div>

        </div>

      </div>

    </transition>

The overlays current css:

.mobile-popup-overlay {

  position: fixed;

  background-color: $black;

  opacity: 0.9;

  height: 100vh;

  width: 100vw;

  overflow: visible;

  z-index: 100;

}