如何让我的模态背景进入页面的底部而不是视口的底部？

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