我的网络应用程序是用Vue制作的，所以当然要把东西拆分成组件。

正如你在这里看到的，在我的路由器视图中，当我显示一个弹出窗口，我想要占据整个屏幕时，它只占据了它的一部分，因为导航条被渲染，这占了10VH。

你可以在这里看到:

所以我知道有一个解决办法:

1. 将弹出窗口div移动到app.vue文件，并使用$emit告诉它在按下按钮时显示。 由于它在app.vue文件中，因此将占用100VH.

然而，我想知道是否有什么更简单的方法可以让div占据整个屏幕，即使它在路由器视图中，而不是在顶层？

代码示例（覆盖和列表项之一）:

 <!-- 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>

覆盖当前CSS:

.mobile-popup-overlay {
  position: fixed;
  background-color: $black;
  opacity: 0.9;
  height: 100vh;
  width: 100vw;
  overflow: visible;
  z-index: 100;
}