title: Setting max-height relative to browser window size, not body size
body: <p>I have a modal popup box on my site, inside the <code>&lt;body&gt;</code> tag.</p>
  
  <p>This is the styling of the popup:</p>
  
  <pre><code>.modalbox {
      text-shadow: none;
      position: absolute;
      padding: 22px;
      left: 50%;
      background: white;
      z-index: 90;
      border-radius: 6px;
      display: none;
      font-size: 14px;
      width: 80%;
  }
  </code></pre>
  
  <p>Setting the width is simple. However, the vertical content is dynamic and therein my problem lies - I don't want the box to be taller than the browser window.</p>
  
  <p>I've tried setting <code>max-width: 90%;</code>, and this works if the <code>body</code> of the page is not longer vertically than the browser window.</p>
  
  <p>However, when the <code>body</code> overflows (and scrollbars appear), then the <code>90%</code> maximum height above is relative to the height of the <code>body</code>, not the window. This means that the modal box can overrun out of the window vertically, forcing the user to scroll the page to see its full content.</p>
  
  <p>What I want to accomplish is for that max height to be 90% of the <em>browser window</em> so that the entire modal box is visible at all times.</p>
  
  <p>I will handle overflow, I just need help figuring out how to restrict the vertical size in the way described above.</p>