滚动时如何获得覆盖整个页面的覆盖

Question

我有一个单击图像时触发的覆盖图。叠加层的问题在于，当您开始滚动时，背景（浅蓝色）消失了。我希望这种浅蓝色的覆盖背景可以覆盖整个页面，可以滚动或不滚动。

我尝试将覆盖层的高度设置为100vh和100％。

KeyEvent

* {padding: 0; margin: 0; box-sizing: border-box; }

body { padding: 152px 32px; position: relative; }

.overlay-text {
  height: 100%;
  min-height: 100%;
}

.overlay {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  overflow-y: scroll;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

iframe {
  margin: 0 auto;
  display: block;
}

.popup {
  background: #dff9fb;
  height: 100%;
  position: relative;
  padding-top: 24px;
}

.close {
  position: absolute;
  top: 12px;
  right: 16px;
}

我希望覆盖层的浅蓝色背景即使在滚动时也要占据高度和宽度的100％。

Answer 1

只需移动：将background: #dff9fb;从.popup移到.overlay

* {padding: 0; margin: 0; box-sizing: border-box; }

body { padding: 152px 32px; position: relative; }

.overlay-text {
  height: 100%;
  min-height: 100%;
}

.overlay {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  overflow-y: scroll;
    background: #dff9fb;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

iframe {
  margin: 0 auto;
  display: block;
}

.popup {
  height: 100%;
  position: relative;
  padding-top: 24px;
}

.close {
  position: absolute;
  top: 12px;
  right: 16px;
}

<ul>

  <li>

    <a href=#popup1>
    <img class="new-tracks__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/new.jpg"></a>

    <div id="popup1" class="overlay">
      <div class="popup">

        <h2>Jerry Craft - <em>"New Kid"</em></h2>

        <iframe src="https://open.spotify.com/embed/album/2yFC1YqdyPHnpCGJubdGaK" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

        <div class="overlay-text">
          <p>The three Greystone kids always raced each other home when they got off the school bus, and Finn always won.</p>

          <p>It wasn’t because he was the fastest.</p>

          <p>Even he knew that his older brother and sister, Chess and Emma, let him win so he could make a grand entrance.</p>

          <p>Today he burst into the house calling out, “Mom! We’re home! It’s time to come and adore us!”</p>

          <p>“Adore” had been on his second-grade spelling list two weeks ago, and it had been a great discovery for him. So that was what it was called, the way he had felt his entire life.</p>

          <p>Emma, who was in fourth grade, dropped her backpack on the rug beside him and kicked off her red sneakers. They flipped up and landed on top of the backpack—someday, Finn vowed, he would get Emma to teach him that trick.</p>

          <p>“Twenty-three,” Emma said. There was no telling what she might have been counting. Finn hoped it was a prediction of how many chocolate chips would be in every cookie Mom was probably baking for them right now, for their after-school snack.</p>

          <p>Finn sniffed. The house did not smell like cookies.</p>

          <p>Oh well. Mom worked from home, designing websites, and sometimes she lost track of time. If today was more of a Goldfish-crackers-and-apple-slices kind of day, that was okay with Finn. He liked those, too.</p>

          <p>“Mom!” he called again. “Your afternoon-break entertainment has arrived!”</p>

          <p>“She’s in the kitchen,” Chess said, hanging his own backpack on the hook where it belonged. “Can’t you hear?”</p>

          <p>“That would mean Finn had to listen for once, instead of talking,” Emma said, rubbing Finn’s head fondly and making his messy brown hair even messier. Finn knew she didn’t mean it as an insult. He was pretty sure Emma liked talking as much as
            he did.</p>

          <a class="close" href="#">&times;</a>
        </div>
      </div>
  </li>

</ul>

Answer 2

您要告诉弹出窗口和叠加层高度：100％，因此您需要告诉他们“至少100％”或最小高度：100vh;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 152px 32px;
  position: relative;
}

.overlay-text {
  height: 100%;
  min-height: 100%;
}

.overlay {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  min-height: 100vh;
  visibility: hidden;
  opacity: 0;
  overflow-y: scroll;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

iframe {
  margin: 0 auto;
  display: block;
}

.popup {
  background: #dff9fb;
  min-height: 100vh;
  position: relative;
  padding-top: 24px;
}

.close {
  position: absolute;
  top: 12px;
  right: 16px;
}

<ul>
  <li>
    <a href=#popup1><img class="new-tracks__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/new.jpg"></a>
    <div id="popup1" class="overlay">
      <div class="popup">
        <h2>Jerry Craft - <em>"New Kid"</em></h2>
        <iframe src="https://open.spotify.com/embed/album/2yFC1YqdyPHnpCGJubdGaK" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        <div class="overlay-text">
          <p>The three Greystone kids always raced each other home when they got off the school bus, and Finn always won.</p>
          <p>It wasn’t because he was the fastest.</p>
          <p>Even he knew that his older brother and sister, Chess and Emma, let him win so he could make a grand entrance.</p>
          <p>Today he burst into the house calling out, “Mom! We’re home! It’s time to come and adore us!”</p>
          <p>“Adore” had been on his second-grade spelling list two weeks ago, and it had been a great discovery for him. So that was what it was called, the way he had felt his entire life.</p>
          <p>Emma, who was in fourth grade, dropped her backpack on the rug beside him and kicked off her red sneakers. They flipped up and landed on top of the backpack—someday, Finn vowed, he would get Emma to teach him that trick.</p>
          <p>“Twenty-three,” Emma said. There was no telling what she might have been counting. Finn hoped it was a prediction of how many chocolate chips would be in every cookie Mom was probably baking for them right now, for their after-school snack.</p>
          <p>Finn sniffed. The house did not smell like cookies.</p>
          <p>Oh well. Mom worked from home, designing websites, and sometimes she lost track of time. If today was more of a Goldfish-crackers-and-apple-slices kind of day, that was okay with Finn. He liked those, too.</p>
          <p>“Mom!” he called again. “Your afternoon-break entertainment has arrived!”</p>
          <p>“She’s in the kitchen,” Chess said, hanging his own backpack on the hook where it belonged. “Can’t you hear?”</p>
          <p>“That would mean Finn had to listen for once, instead of talking,” Emma said, rubbing Finn’s head fondly and making his messy brown hair even messier. Finn knew she didn’t mean it as an insult. He was pretty sure Emma liked talking as much as
            he did.</p>
          <a class="close" href="#">&times;</a>
        </div>
      </div>
    </div>
  </li>
</ul>