html - 如何制作可收缩的滚动条？

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>

请注意，如果我缩小窗口的高度，滚动条会如何缩小。这是我想要的功能。

问题：
我想做与上面类似的东西，只有顶部 div 的固定高度为 100 像素。

如果我在实践中这样做，则底部滚动条在我缩小页面时不再缩小 - 系统会添加一个外部滚动条来管理这两个部分。我不想要这个，我想保留上面看到的行为。

我该怎么做呢？

Answer 1

我不完全确定我是否正确理解了您，但在我看来，您正在尝试将相对值和像素值结合起来，但这永远不会奏效。

这是我能看到的唯一方法。它绝对定位元素。

  <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

我找到了答案。我需要使用 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>