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
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.
position: fixed;
on the overlay.
Change #overlay
position:absolute
to position:fixed