CSS 100% Height, and then Scroll DIV not page

Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.

I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.

So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.

I hope this makes sense.

Solution

<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
    </div>
  </body>
</html>

That should do it for a simple case

I believe this will work for your case

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

this example will give you a static header and footer and allow the navigator and content area to be scrollable.