请问如何将滚动条限制在当前屏？

[qq_33190755]

首先如图所示我左边一共有200个div，但是他的滚动条在窗口处，相当于拖动了整个屏幕，我想实现的是

如第二张图那样，保持在第一屏，滚动条在灰色div的右边，当我拖动滚动条的时候只有当前div会滚动，显示后面的内容

[qq_33190755]

想要的效果类似element-ui官网，点击组件后的滚动条效果

[天际的海浪]

滚动的容器设置overflow-y: auto;和一个固定的 width

[qq_33190755]

引用 2 楼 天际的海浪 的回复:

滚动的容器设置overflow-y: auto;和一个固定的 width

我设置了但是他的滚动条还是在窗口那里

[天际的海浪]

引用 3 楼 qq_33190755 的回复:

[quote=引用 2 楼 天际的海浪 的回复:] 滚动的容器设置overflow-y: auto;和一个固定的 width

我设置了但是他的滚动条还是在窗口那里[/quote] 设置固定的 height

[前端_小菜鸟]

这个就是一个上下布局,你只需要将下面的可视区域单独做overflow处理就可以,顶部固定不变,下面的给个可视区域高度,比如顶部20vh,底部就用80vh 然后设置滚动就可以

[qq_33190755]

引用 4 楼 天际的海浪 的回复:

[quote=引用 3 楼 qq_33190755 的回复:] [quote=引用 2 楼 天际的海浪 的回复:] 滚动的容器设置overflow-y: auto;和一个固定的 width

我设置了但是他的滚动条还是在窗口那里[/quote] 设置固定的 height[/quote] 我设置了固定高度后可以了，然后还有一个问题是如果在不同分辨率的情况下怎么去对他做一个适配呢？

[qq_33190755]

引用 5 楼 前端_小菜鸟 的回复:

这个就是一个上下布局,你只需要将下面的可视区域单独做overflow处理就可以,顶部固定不变,下面的给个可视区域高度,比如顶部20vh,底部就用80vh 然后设置滚动就可以

这个vh可以理解成当前屏幕的百分比吗？如果上面用20vh高度，下面用80vh高度，然后再不同分辨率，尺寸的情况下，上面都会占20%,下面80%？

[前端_小菜鸟]

引用 7 楼 qq_33190755 的回复：

引用 5 楼 前端_小菜鸟 的回复:

这个就是一个上下布局,你只需要将下面的可视区域单独做overflow处理就可以,顶部固定不变,下面的给个可视区域高度,比如顶部20vh,底部就用80vh 然后设置滚动就可以

这个vh可以理解成当前屏幕的百分比吗？如果上面用20vh高度，下面用80vh高度，然后再不同分辨率，尺寸的情况下，上面都会占20%,下面80%？

对的，类似于vue里面，上面是头部，下面是内容，内容部分使用插槽，头部始终是20，内容部分始终是80