Как сделать сжимаемую полосу прокрутки? - PullRequest
Новая
       5

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

1 голос
/ 16 марта 2010

Что я хочу: 

   <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 пикселей для верхнего div.

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

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

Ответы [ 2 ]

0 голосов
/ 16 марта 2010

Я нашел ответ. Мне нужно использовать выражения 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>
0 голосов
/ 16 марта 2010

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

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

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