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

【问题标题】：How to make a div in a vue component take up the entire screen when using position absolute?使用绝对位置时如何使vue组件中的div占据整个屏幕？
【发布时间】：2020-10-17 02:28:02
【问题描述】：

我的网络应用程序是用 Vue 制作的，所以当然会被分成组件。

所以你可以在这里看到，在我的 router-view 中，当我显示一个我想要占据整个屏幕的弹出窗口时，它只占据了一部分nav bar 被渲染并占用 10vh。

你可以在这里看到：

所以我知道有一种解决方法：

将弹出的 div 移动到 App.vue 文件并使用 $emit 告诉它在按下按钮时显示。由于在App.vue文件中，所以会占用100vh。

但是我想知道是否有什么更简单的方法可以让 div 占据全屏，即使它位于路由器视图中而不是顶层？ p>

代码示例（叠加层和列表项之一）：

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

【问题讨论】：

标签： javascript html css vue.js position

【解决方案1】：

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

top: 0;
left: 0;

【讨论】：

不敢相信我没有尝试过。我只是假设它是 top: 0 left: 0 默认情况下。很简单。谢谢！

【解决方案2】：

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

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

【讨论】：