How do I make a shrinkable scrollbar?

Question

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?

Answer 1

I'm not entirely sure whether I understand you correctly, but it looks to me like you are trying to combine relative and pixel values, which never works.

this is the only way I can see to do this. It positions the elements absolutely.

  <div style="position: absolute; 
              left: 0px; top: 0px; height: 100px; 
              overflow:scroll;right: 0px;">
    &nbsp;
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

<div style="position: absolute; 
            left: 0px; top: 100px; 
            bottom: 0px; right: 0px; 
            overflow:scroll;"> 
    &nbsp;
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

Answer 2

I found the answer. I need to use css expressions

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

<div style="overflow:scroll;width:100%;height:expression((document.body.clientHeight - 120) + 'px');"> &nbsp;
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>