Home/ Questions/Q 746123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T09:39:46+00:00

Okay so I haven’t been able to find a question with an answer yet,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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.

    • 0