title: Absolutely positioned element going off screen when filled
body: <p>I have a DIV container, <code>.floatingPage</code>, which is positioned absolutely over two other DIV containers <code>.top</code> and <code>.bottom</code>. My problem is that the contents of the <code>.floatingPage</code> element are dynamic and <em>sometimes</em> contain a lot of data, which extends <code>.floatingPage</code> below the visible part of the screen.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top { 
    height:350px; 
    background:'images/background.png'; 
    position:relative; 
  }
  
  .bottom { 
    height:350px; 
    background:#F1F1F1; 
  }
  
  .floatingPage { 
    position:absolute; 
    top:50px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top"&gt;
      &lt;div class="floatingPage"&gt;
          // blah blah blah (lots of data)
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, because I know my app's users use JS (company control panel), I have been calculating the height of the <code>.floatingPage</code> element and extending the height of <code>.bottom</code> to suit the new contents. This has been OK until now and has started to cause problems. Plus, I don't want to do this hack for other projects that have users without JS.</p>
  
  <p>I need this <code>floatingPage</code> element to float over the top of the other two - that's the whole point of site's design. How can I keep this affect but prevent it from running off the page, without JS?</p>