CSS: How to get this overlay to extend 100% with scrolling?

Question

Here is an example of the issue in question:

http://dev.madebysabotage.com/playground/overlay.html

You see there is a gray overlay over the entire page, but if you

Answer 1

This happens because the #overlay position: absolute is relative to the 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 (but you will need to remove the min-height: 100% and height: 100% on the first because this makes it use the viewport size). The #overlay will then use the dimensions and fill the entire page.