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

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

在左容器和右容器中，当数据超过容器的视口高度时，我需要滚动。我只希望红色高亮显示的容器滚动——外部的蓝色容器是固定的，而蓝色容器内部的黄色部分是固定的。只有红色容器的内容才会滚动，只有在适用的情况下

我已经建立了一个网站，在那里我可以玩它，并可以与您共享（应用程序本身在防火墙后面，codepen是我能做的最好的）。您将在代码笔上看到的是，当我设置容器的高度时，我可以让容器滚动（在本例中为380px，大致相当于屏幕上有多少空间）。如果您将示例代码笔的容器向上移动，您将看到滚动区域保持固定（duh），如果您将可滚动容器的高度增加到380px以上，一旦您移到视口下方，滚动开始消失——大约在800px左右，滚动完全消失

我到底错过了什么？蓝色容器的大小应与视口的底部一致，无论是800px高还是1600px高。然后，红色容器的高度将填充蓝色容器内的可用高度，并在必要时滚动

我真的被我在这里错过的东西难住了

编辑：jQuery和javascript大小调整不是选项。这只能通过CSS来实现，我只是在某个地方缺少了一些特性，我很难堪

编辑2：我尝试了建议的html（html:height:100%等）。它在codepen中工作，但是当我在我的完整版本的站点上尝试它时，它不工作。在这里的屏幕截图中，您可以看到蓝色高亮区域是正在讨论的滚动容器，右侧的白色条是滚动条（自定义样式的背景），但没有实际的滚动条——只有滚动条背景。

---

使用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%;}

---

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

---

HTML

---

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

我已经实现了一个基本版本，它将帮助您解决问题

你可以在上找到代码

这是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;
}

---

这是真实的个人信息吗？哦，不。所有的虚拟数据。我认为这是最好的方法，但我认为他也想使用自定义滚动条。这个解决方案的问题是，它没有解决我问题的高度调整部分，除非我遗漏了什么？我可能误解了；你是否也在问如何使框的高度始终填满页面？哦，你的意思是将滚动条隐藏在某个高度！我将编辑我的示例。代码中有太多复杂的CSS，这是一个非常糟糕的示例，因为隔离一个您确实需要更改的类是非常困难的。老实说，我建议你花点时间从基础做起。每个人，有一段时间，我不想再多了解一点。嗯，有10个嵌套的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;
}

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;
}