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

发布于 2024-08-25 09:51:08 字数 634 浏览 9 评论 0 原文

我想要的：

   <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 像素。

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

我该怎么做？

原文

What I want:

   <div style="overflow:scroll;width:100%;height:50%;">  
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

<div style="overflow:scroll;width:100%;HEIGHT:50%;">  
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

Notice how if I shrink the height of the window the scrollbars shrink. This is the functionality I want.

The issue:
I want to make something similar to the above, only with a fixed height of 100 pixels for the top div.

If I do this in practice the bottom scrollbar no longer shrinks as I shrink the page - the system adds an outer scrollbar to manage both sections. I don't want this, I want to retain the behavior seen above.

How do I do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你げ笑在眉眼 2024-09-01 09:51:08

我不完全确定我是否正确理解了您的意思，但在我看来，您正在尝试结合相对值和像素值，但这是行不通的。

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

  <div style="position: absolute; 
              left: 0px; top: 0px; height: 100px; 
              overflow:scroll;right: 0px;">
     
    <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;"> 
     
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

I'm not entirely sure whether I understand you correctly, but it looks to me like you are trying to combine relative and pixel values, which never works.

this is the only way I can see to do this. It positions the elements absolutely.

  <div style="position: absolute; 
              left: 0px; top: 0px; height: 100px; 
              overflow:scroll;right: 0px;">
     
    <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;"> 
     
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

回复收藏 0 原文

我的鱼塘能养鲲 2024-09-01 09:51:08

我找到了答案。我需要使用CSS表达式

       <div style="overflow:scroll;width:100%;height:100px">  
    <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');">  
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

I found the answer. I need to use css expressions

       <div style="overflow:scroll;width:100%;height:100px">  
    <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');">  
    <div style="height:500px;width:400px;border:solid 3px red;">
        </div>
        </div>

回复收藏 0 原文

~没有更多了~