只在特定 DIV 容器中显示垂直滚动条

Question

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

在左右两个容器中，当数据超过容器的视口高度时，我需要滚动。我只想让红色突出显示的容器滚动——外部蓝色容器是固定的，蓝色容器内的黄色部分也是固定的。只有红色容器的内容应该滚动，并且仅在适用时才滚动。

我已经上传了一个codepen，在其中进行了测试，并可以与您分享（应用本身位于防火墙后面，codepen是我能做的最好的）。您将在codepen上看到，当我设置容器的高度时（在这种情况下，大约为屏幕上的可用空间），我可以使容器滚动。如果您将示例codepen的容器向上移动，您会发现滚动区域保持固定（傻瓜），如果您将可滚动容器的高度增加到380px以上，则一旦低于视口，滚动开始消失——在大约800px左右完全消失。

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

我真的被卡住了，不知道我错过了什么。

编辑：jQuery和javascript大小调整不是选项。这只能通过CSS实现，我只是缺少某些属性而已。

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

- Mike Earley

---

那是真实的个人信息吗？ - CRABOLO

不行。所有数据都是虚拟数据。 - Mike Earley

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

- Aslam

Answer 2

我喜欢使用的解决方案是使用视口宽度（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;
}

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

- DiscoInferno

Answer 3

使用 CSS，只需使用 overflow-y:scroll 并定义最大高度或仅高度即可。

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

--编辑2：一个CSS解决方案

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

- Aage Torleif

---

我认为这是最好的方法，但我认为他也想使用自定义滚动条。 - enguerranws

我可能误解了，您是否也在询问如何使盒子的高度始终填满页面？ - Aage Torleif

这段 jQuery 代码将把一个元素设置为窗口高度： $('.thebox').height($(document).height()); - Aage Torleif

好的...嗯，这可能取决于您可能正在进行的其他CSS事情。我将进一步编辑我的答案。 - Aage Torleif

那个 Codepen 里的 CSS 太复杂了，真的是一个很糟糕的例子，因为要隔离出你需要更改的那个类别非常困难。老实说，我建议花时间从基础开始学习。有时候重新开始并掌握更多知识也不会有什么坏处。而且，拥有像 10 个嵌套的 CSS 类别就是你的问题所在。没有人能够正确地管理这样嵌套的继承关系。 - Aage Torleif