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>

如何制作可收缩滚动条？

2 个答案: