CSS: How to get this overlay to extend 100% with scrolling?
This happens because the #overlay position: absolute is relative to the <html> and using it's dimensions, which is only the viewport height.
To make sure that the #overlay uses the dimensions of whole page, you could use position: relative; on the <body> (but you will need to remove the min-height: 100% and height: 100% on the <body> first because this makes it use the viewport size). The #overlay will then use the <body> dimensions and fill the entire page.
Change #overlay position:absolute to position:fixed
position: fixed; on the overlay.