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

Question

I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.

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

Change position to fixed like this:

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