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

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 s开发者_开发技巧et overlay height according to the page height.Can any one tell me how I can achieve this with out using JavaScript?

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>.

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