如何製作可收縮滾動條？

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>