How to set overlay on a page according to page height using CSS.

Question

In my web site I want to set a overlay above the page when JavaScript is disabled.Since height of every page is different so I am unable to set the overlay based on the page height.Currently what I am doing is that I am setting a fix maximum height of 2000px as follows:

.overLay { background-color:#666666; height:2000px; left:0; position:absolute; top:0; width:100%; z-index:1003; opacity: 0.5; }

But this not what I want.Because some pages have very less height than the mentioned overlay height and some pages have more, so overlay is not to much effective this case.I want to set overlay height according to the page height.Can any one tell me how I can achieve this with out using JavaScript?

Answer 1

This may well have other side effects depending on your content or whatever...but you could perhaps use

body {
  overflow:hidden;
}

But that of course means the page wouldn't scroll if the content was longer than the page...but it does stop some pages becoming much longer only because of the overlay

Answer 2

body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

This should work. The overlay should be a <div>.