如何在HTML和CSS中构建静态滚动条_Html_Css

如何在HTML和CSS中构建静态滚动条

html css

如何在HTML和CSS中构建静态滚动条,html,css,Html,Css,基本上，我必须实现stacic滚动内容部分。无论浏览器大小如何，顶部静态边框和底部静态边框必须始终可见，静态滚动内容应适应这种调整大小的情况我一直在玩overflow-y:hidden容器，在子容器中使用overflow-y:scroll，但没有成功这就是我一直在尝试的： .vertical-scroll-viewer { overflow: auto; height: 100%; /*height: 100%; width: 100%; b

基本上，我必须实现

stacic滚动内容

部分。无论浏览器大小如何，顶部静态边框和底部静态边框必须始终可见，

静态滚动内容

应适应这种调整大小的情况

我一直在玩

overflow-y:hidden

容器，在子容器中使用

overflow-y:scroll

，但没有成功

这就是我一直在尝试的：

    .vertical-scroll-viewer {
    overflow: auto;
    height: 100%;
    /*height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;*/
}

    .vertical-scroll-viewer-content {
    overflow: hidden;
    height: 100%;
    /*
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;*/
}

以及HTML：

  <html>
<head>   
    <title>test</title>
</head>
<body>
    <h1> Header1</h1>
    <div class="vertical-scroll-viewer">

        <div class="vertical-scroll-viewer-content ">
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
        </div>
    </div>
    <h1> Header2</h1>
</body>
</html>


测试
校长1
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
校长2

标题2在滚动条下方消失

有人知道怎么做吗？谢谢


<div id="div1" style="width:200px; height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

你好

这很有效

注意html/body的重置和vh、vw的使用，而不是100%

html，正文{高度：100vh；边距：0；}
.集装箱{
宽度：100vw；
高度：100vh；
背景：水；
保证金：自动；
填充：1px；
}
#对{
左边距：15vw；
高度：100vh；
背景：黄色；
溢出：滚动；
}
.静态{
高度：50px；
背景：绿色；
}
#底部{
宽度：100%；
位置：绝对位置；
底部：0；
}
#左{
宽度：15vw；
高度：100vh；
背景：红色；
浮动：左；
位置：绝对位置；
}
#中间的{
高度：计算（100vh-100px）；
overflow-y：滚动；/*它可以工作*/
}


顶部
中间的
Lorem ipsum
同侧眼睑
底部
赖特
Lorem ipsum
同侧眼睑

请展示您尝试的内容。标记和css。请添加您尝试过的代码。我用HTML和CSW编辑了这个问题，而css滚动条样式的支持有点分散，它正在变得更好。您最接近的通用支持是

滚动条颜色：#000#fff但是如果你想创建自己的，请不要忘记可访问性。请提供一些解释。谢谢，但该解决方案不适合浏览器高度的大小：正如你可以看到Hello滚动条从底部溢出。是的或多或少是我需要的，但中间部分应该始终可见，还有底部。中间部分+顶部+底部应该始终可见，无论右侧部分如何。您好，当我在本地html文件中复制它时，它工作正常。顶部和底部始终显示，但如果我在主要部分滚动，它也会滚动所有内容。有没有办法让它像StackOverflow中的菜单一样静态？我将把它标记为已回答，并在另一个问题中询问谁来执行静态StackOverflow菜单。再次感谢。我想如果你加上高度：70vh代替高度：计算（100vh-100px）并添加高度：15vh到顶部和底部这两个元素可能会起作用