Html 固定父div中2个垂直div的一部分时如何限制div的高度

我有一个包含两个div的边栏

侧边栏本身是位置：固定的

第一个div的高度相对较小，可能始终适合屏幕。 但是，第二个div可能包含许多元素，因此它超过了浏览器窗口的高度

我必须如何设置CSS的样式，以便第二个div限制其高度以适应包括垂直滚动条在内的总体高度

查看此小提琴以了解更多信息：

HTML

<div class="sidebar-left">
  <div class="nonscrollable-header">

      I want the content in yellow div
      always to be visible and not move;
      the content in orange should be in a div with a vertical scrollbar<br>
      I don't want to specify any absolute heights or margins etc.
  </div>
  <div class="scrollable-content-exceeding-height">
  Here is the content I want to be in scrollable div instead of exceeding the height.
  <ul>
  <li>here is lots of content which i want to be in a vertical scrollable div</li>
  <li>it obiously should not exceed the height of the window</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  <li>here is lots of content</li>
  </ul>

  </div>

</div>

请注意，我不喜欢设置任何绝对高度值

.scrollable-content-exceeding-height {
  background-color: orange;
  overflow-y: scroll;
  max-height:300px;
}

根据需要编辑最大高度，使用下面的答案显示的jquery将div设置为窗口的高度。

如果使用是一个选项，可以通过将侧栏的

显示类型更改为
flex
并将flex项的方向指定为
列来实现。因此，我们可以通过将第二个子元素的
flex grow
属性设置为
1
来填充剩余的高度

最后，我们可以在需要时通过将flex项的
overflow
属性设置为
auto
，添加滚动条UI：

。左侧侧栏{
位置：固定；
宽度：300px；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.超过高度的可滚动内容{
弹性：1；
溢出：自动；
}

注意：由于简洁，省略了供应商前缀。在此期间，Flexbox语法已更改多次。为了更好，您应该添加特定的供应商前缀/版本


正文{
保证金：0；
}
.左侧边栏{
框大小：边框框；
边框：1px纯黑；
位置：固定；
宽度：300px；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.不可旋转收割台{
背景颜色：黄色；
}
.超过高度的可滚动内容{
背景颜色：橙色；
弹性：1；
溢出：自动；
}

我想要黄色div的内容
始终保持可见，不移动；
橙色的内容应位于带有垂直滚动条的div中

我不想指定任何绝对高度或边距等。
这是我想在滚动div而不是超过高度的内容。

这里有很多内容，我想在一个垂直滚动div
它显然不应该超过窗户的高度
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容
这里有很多内容

因为您不想硬编码高度，所以可以使用此jquery方法设置高度


根据其内容预测.nonscrollable收割台高度，并静态设置（例如100px）。然后设置。可滚动内容超过高度的高度，代码如下

.scrollable-content-exceeding-height{
  height: calc(100% - 100px);
}

您正在查找的CSS属性是溢出。
"

。左侧侧栏{
边框：1px纯黑；
位置：固定；
宽度：300px；
}
.不可旋转收割台{
背景颜色：黄色；
}
.超过高度的可滚动内容{
背景颜色：橙色；
溢出：自动；
最大高度：100px；
}

这是

希望这是你问题的答案：）

Remy
你想要纯CSS解决方案还是可以选择使用javascript？如果可能的话，我不想在这个任务中使用javascript或JQuery。谢谢Hashem，你的解决方案看起来很好，我必须检查一下浏览器的兼容性。我知道这可能行得通，calc函数+1，谢谢！然而，我更喜欢灵活的盒子布局的解决方案。
code

.scrollable-content-exceeding-height{
  height: calc(100% - 100px);
}