如何使模態背景轉到頁面底部而不是視口底部？

Question

我需要在此投資組合網站上為圖片制作一個燈箱。 我已經將所有東西都連接起來了，因此在單擊圖像時，圖像就變成了原始大小，就像一個簡單的燈箱。 但是我遇到的問題是，模態背后的背景只會下降到視口的底部，而不會一直延伸到頁面的底部。 讓我知道我是否可以提供其他信息。

燈箱問題

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