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

admin管理员组

文章数量:1405105

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

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

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

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

• javascript
• html
• css
• vue.js
• position

Share Follow asked Jun 26, 2020 at 13:15 squishsquish 1,12622 gold badges1717 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The popup might be 100vh height, but is it also at the top? You should set the top and left property aswell:

top: 0;
left: 0;

Elements are not really "limited" to de border of theys parents. You can indert an element in a parent smaller than it, and i will overflow at the right and bottom. You can use negative margin to make them overflow they parent on the top of the left.

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

本文标签：