Как сделать усадочную полосу прокрутки?

Question

Что я хочу:

<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> 

Обратите внимание, как если бы я сжиматься высоту окна полосы прокрутки усадку. Это функциональность, которую я хочу.

Вопрос:
Я хочу сделать что-то подобное выше, только с фиксированной высотой 100 пикселей для верхних дел.

Если я делаю это на практике, нижняя полоса прокрутки больше не сжимается при сжатии страницы - система добавляет внешнюю полосу прокрутки для управления обеими разделами. Я не хочу этого, я хочу сохранить поведение, описанное выше.

Как это сделать?

Answer 1

Я нашел ответ. Мне нужно использовать выражения css

 <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> 

Answer 2

Я не совсем уверен, правильно ли я вас понимаю, но мне кажется, что вы пытаетесь совместить относительные и пиксельные значения, которые никогда не срабатывают.

Это единственный способ, которым я могу это сделать. Он позиционирует элементы абсолютно.

<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>