html - 垂直滚动条仅在特定的DIV容器中

我正在构建一个页面，该页面的左侧是列表，而右侧则是一个容器，其中显示了单个元素的详细信息。这是显示页面布局和我要滚动的部分的示例图像。

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

我在上面放置了一个codepen并可以与您共享(该应用程序本身位于防火墙之后，codepen是我能做到的最好的方法)。您将在Codepen上看到的是，当我设置容器的高度时，可以使容器滚动(在本例中为380px，这与屏幕上有多少空间无关)。如果将示例代码笔的容器向上移动，则会看到滚动区域保持固定(duh)，并且如果将可滚动容器的高度增加到380px以上，则一旦进入视口(viewport)以下，滚动就会开始消失-在大约800px左右就完全消失了。

我在这里想念什么呢？无论是800像素高还是1600像素高，蓝色容器都应将其大小调整到视口(viewport)的底部。然后，红色容器的高度将填充蓝色容器内的可用高度，并在必要时滚动。

我真的很想念我在这里想念的东西。

编辑:不能选择jQuery和javascript调整大小。这只能通过CSS来实现，我只是在某个地方缺少一些属性而感到困惑。

编辑2 :我尝试了建议的html(html:高度:100％，等等)。它可以在Codepen中使用，但是当我在网站的完整版本上尝试使用它时，则无法使用。在此处的屏幕截图中，您可以看到蓝色突出显示的区域是有问题的滚动容器，右侧的白色条是滚动条(自定义样式的背景)，但没有实际的滚动条，仅是条形背景。

最佳答案

我已经实现了一个基本版本，该版本可以为您提供帮助。

您可以在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;
}

关于html - 垂直滚动条仅在特定的DIV容器中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20976677/