How do I make a shrinkable scrollbar?

Posted by diadem on Stack Overflow See other posts from Stack Overflow or by diadem
Published on 2010-03-15T21:24:01Z Indexed on 2010/03/15 21:39 UTC
Read the original article Hit count: 138

Filed under:
|
|

What I want:

   <div style="overflow:scroll;width:100%;height:50%;"> &nbsp;
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

<div style="overflow:scroll;width:100%;HEIGHT:50%;"> &nbsp;
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

Notice how if I shrink the height of the window the scrollbars shrink. This is the functionality I want.

The issue:
I want to make something similar to the above, only with a fixed height of 100 pixels for the top div.

If I do this in practice the bottom scrollbar no longer shrinks as I shrink the page - the system adds an outer scrollbar to manage both sections. I don't want this, I want to retain the behavior seen above.

How do I do this?

© Stack Overflow or respective owner

Related posts about html

Related posts about css