How can I make my modal background go to the bottom of the page rather than the bottom of the viewport?

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