使用绝对位置时，如何使vue组件中的div占据整个屏幕？

Question

我的网络应用程序是在 Vue 中制作的，所以当然事情被分成了组件。

正如您在这里看到的，在我的 router-view 中，当我显示一个弹出窗口时，我想占用整个屏幕，它只占用一部分，因为 导航栏 被渲染，占用 10vh。

你可以在这里看到：

所以我知道有一种方法可以修复它：

将弹出窗口 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;
}

Answer 1

元素并没有真正“限制”到它们 parent 的边界。你可以在比它小的parent中插入一个元素，i会在右边和底部溢出。您可以使用负边距使它们溢出 parent 在左上方。

#inside {
  position: fixed;
  height: 300px;
  width: 300px;
  border : 4px solid red;
  margin : -100px 0 0 -100px
}

#container {
  height : 800px;
  width : 100px;
  border : 4px solid black;
  margin : 100px 0px 0px 100px;
}

<div id="container">
<div id="inside">
</div>
</div>

Answer 2

弹出窗口可能是 100vh 高度，但它也在顶部吗？您还应该设置顶部和左侧属性：

top: 0;
left: 0;

使用绝对位置时，如何使vue组件中的div占据整个屏幕？

How to make a div in a vue component take up the entire screen when using position absolute?

html

javascript

css

position

vue.js