html - Make Div overlay ENTIRE page (not just viewport)? -

So I have a problem that I think is quite normal but I still have a good solution for this. I want to cover an overlay div full page ... not only the viewport I do not understand why it has worked so hard ... I have tried to set up the body, 100% etc. For HTML heights, but that does not work. Even I have so far:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; . Overlay {status: absolute; Z-index: 3; Opacity: 0.5; Filter: Alpha (Opacity = 50); Top: 0; Bottom: 0; Left: 0; Correct: 0; Width: 100%; Height: 100%; Background color: black; Color: white;} body {height: 100%; } Html {height: 100%; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div style = "height: 100%; width: 100%; position: relative;" & Gt; & Lt; Div style = "height: 100px; width: 300px; background color: red;" & Gt; & Lt; / Div & gt; & Lt; Div style = "height: 230px; width: 9000px; background color: green;" & Gt; & Lt; / Div & gt; & Lt; Div style = "height: 900px; width: 200px; background-color: blue;" & Gt; & Lt; / Div & gt; & Lt; Div class = "overlay" & gt; Test Test! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

If one exists then I will also open in Javascript for a solution, but I want to use some simple CSS. Viewport is in all cases, but you want the entire website to be dark when scrolling. For this, you want to use the situation: absolute instead of status: fixed . Fixed you will keep the steady position on the screen while scrolling, giving the assumption that the whole body is dark.

Example:

  div.fadeMe {opacity: 0.5; Background: # 000; Width: 100%; Height: 100%; Z-index: 10; Top: 0; Left: 0; Status: fixed; }  

  & lt; Body & gt; & Lt; Div class = "fadeMe" & gt; & Lt; / Div & gt; & Lt; P & gt; Here is a group of materials ... & lt; / P & gt; & Lt; / Body & gt;