Justin Justin - 8 months ago 32
CSS Question

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.

BUT, what I want it to now do, is 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.

Thanks in advance.

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

That should do it for a simple case

I believe this will work for your case

  <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:0px; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>

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