仅限特定DIV容器中的垂直滚动条

Question

我正在构建一个左侧有列表的页面，右侧是一个显示单个项目详细信息的容器。这是一个示例图像，显示了页面布局和我想要滚动的部分。

在左侧容器和右侧容器中，我需要在数据超出容器的视口高度时滚动。我只希望红色突出显示的容器滚动 - 外部蓝色容器是固定的，蓝色容器内的黄色部分是固定的。只有适用时，才应滚动红色容器的内容。

我已经设置了codepen我正在玩它并且可以与你共享（应用程序本身在防火墙后面，代码集是我能做的最好的）。您在codepen上看到的是，当我设置它的高度时，我可以让容器滚动（在这种情况下，380px，这是关于屏幕上有多少空间）。如果你移动示例代码集的容器，你会看到滚动区域保持固定（duh），如果你将可滚动容器的高度增加到380px以上，一旦你进入视口以下，滚动开始消失 - 在周围800px左右它完全消失了。

我在这里错过了什么？蓝色容器应将其自身调整到视口底部，无论是800px高还是1600px高。然后红色容器的高度将填充蓝色容器内的可用高度，并在必要时滚动。

我真的很难过我在这里失踪的东西。

编辑：jQuery和javascript大小调整不是选项。这只能通过CSS实现，我只是在某个地方遗漏了一些属性并且难倒了。

编辑2 ：我尝试了建议的html（html：height：100％等）。它在codepen中工作，但是当我在我的完整版本的网站上尝试它时，它不起作用。在此处的屏幕截图中，您可以看到蓝色高亮区域是有问题的滚动容器，右侧的白色条是滚动条（自定义样式背景），但没有实际滚动 - 只是条形背景。

Answer 1

我已经实施了一个基本版本，可以帮助你。

您可以在https://codepen.io/hunzaboy/pen/aWmMeJ找到代码。

这是CSS

body,
html {
  overflow: hidden;
}

.wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 20%;
  background: blue;
  color: white;
  overflow-y: scroll;
}

.content {
  background: yellow;
  color: brown;
  overflow-y: scroll;
}

Answer 2

使用css只需使用overflow-y：滚动并定义最大高度，或只是高度

.that-box {
    overflow-y:scroll;
    height: ###px;
}

- 编辑：并以一定宽度隐藏滚动条

@media screen and (max-width: 1024px) 
{
    .that-box {
        overflow-y:hidden; //this will cause clipping on content outside of the box
        height: ###px;
    }
}

- edit2：CSS解决方案

html {
    min-height:100%;
    position:relative }
body {
    height:100%}
.box {
    position:fixed;
    height:100%;}

Answer 3

我喜欢使用的解决方案是使用视图宽度（vw）和视图高度（vh）单位。分别使用100相当于您的视口的当前大小。

HTML

<div class="dashboard">
   <div class="left-panel v-scroll">
      <!-- the stuff on your left nav -->
   </div>

   <div class="right-panel v-scroll">
      <!-- the stuff on your right nav -->
   </div>
 </div>

CSS

.dashboard{
  width: 100vw;
}

.left-panel{
  height:100vh;
  width: 20%;  
  float:left;  
  margin-left: 20px;
}

.right-panel{
 height:100vh;
 width: 76%;
 display: flex;
}

.v-scroll{
  overflow: scroll;
}

这将确保它们根据屏幕尺寸的变化进行缩放。