html - overlay resize with CSS -

I have a popup overlay that I am currently resizing with some jquery codes. I am just changing this implementation to work with CSS. It

  & lt; Div id = "bigdiv" & gt; & Lt; / Div & gt; I have a general setup with. & Lt; Div id = "overlay" & gt; & Lt; / Div & gt; # Overlay {background: red; Opacity: 0.6; Status: Completed; Top: 0; Left: 0; Width: 100%; Height: 100%} # BigDiv {height: 2000px; Width: 2000px; Background: blue;}   
 As you can see, the overlay size is at 100% width and height, when the user appears on the overlay, then it fills the screen. However, when the user scrolls over, the size of the overlay does not change  
 thanks.   
 
 
  full  instead of  
 
 Positions the overlay in the specified position relative to the viewport of the screen, and when scrolled   
 you  width: 100%; Height: 100%  or full  top: 0; Correct: 0; Bottom: 0; Left: 0;  Positioning system - Both the overlay cover should cover the entire viewport.