title: Max Bottom a Popup Div
body: <p>I have a popup <code>div</code> which appears in the <em>center</em> of my screen:</p>
  
  <pre><code> ---------------------------
   |           15%           |
   |     ---------------     |
   | 15% |             | 15% |
   |     |             |     |
   |     ---------------     |
   |          15%            |
   ---------------------------
  </code></pre>
  
  <p>I like the left side, top side and right side. But the bottom I don't like.</p>
  
  <p>What I would like it to do is:</p>
  
  <ol>
  <li>Adjust its size to the <code>height</code> of the content ( I think that's <code>height: auto</code>)</li>
  <li>Not go bigger than the <code>15%</code> gap at the bottom.</li>
  <li>Bare in mind inside this <code>div</code>, is a child <code>div</code> which has <code>overflow-y: auto</code>, inside this are <code>div</code>(s) which <code>float</code>.</li>
  </ol>
  
  <p>This was my code:</p>
  
  <pre><code>    #toPopup1, #toPopup2, #toPopup3 {
          font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
          border-radius: 3px 3px 3px 3px;
          color: #333333;
          display: none;
          font-size: 14px;
          margin-left: 15%;
          margin-right: 15%;
          position: fixed;
          top: 15%;
          bottom: 15%;
          width: 70%;
          z-index: 222;
          text-align: center;
      }
  </code></pre>
  
  <p>Then I removed the <code>bottom:15%;</code> with <code>max-height:70%;</code> however the result I got was a much smaller box (almost one line in <code>height</code>), please advise?</p>