title: Disable whole page with an overlay
body: <p>I want to create an overlay that I will use behind a popup. But when the page is scrolled down the overlay is no more there? I can use javascript to get the height of page's content and then can apply same height to overlay but is there any css based solution?</p>
  
  <pre><code>#overlay{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
     top: 0px;
     background-color:#000;
     opacity: .75
  }
  </code></pre>