title: Popup div, fixed but scrollable when too big
body: <p>I want a div that pops up on a fixed position from the top of the viewport, wherever you are on the page. But, when this div has a lot of content, the page doesn't scroll.</p>
  
  <p>So: first the div is out of view, when button is clicked it slides into view. And then you can scroll that div. But the whole page has to scroll, not just inside that div.</p>
  
  <p>It works when I use 'position: absolute', but then it pops up from the top of the body instead of the viewport.</p>
  
  <p>Here's the simple CSS to start with:</p>
  
  <pre><code>div.overlay {
      width: 100%;
      position: fixed;
      min-height: 100%;
      background: red;
      margin-top: 50px;
      top: 100%;
      left: 0;
  }
  </code></pre>
  
  <p>Here's my JSFiddle: <a href="http://jsfiddle.net/uPmb4/" rel="nofollow">http://jsfiddle.net/uPmb4/</a></p>
  
  <p>I hope you get the idea what I'm trying to arrange, but maybe my approach isn't the best way to begin with.</p>