如何将模态背景转到页面底部而不是视口底部？

Question

我需要在此投资组合网站上为照片制作一个灯箱。我把所有东西都连接起来，这样当点击时图像会变成原始大小，就像一个简单的灯箱。但我遇到的问题是模态背后的背景只会下降到视口的底部而不是一直到页面的底部。如果我能提供任何其他信息，请告诉我。

Lightbox Problem

#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}

#overlay img {
    border-radius: 4px solid white;
    margin-top: 10%;
}

#overlay p {
    color: white;
}

Answer 1

将位置更改为固定如下：

#overlay {
   background: rgba(0,0,0,0.8);
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   text-align: center;
}