侧边栏占据剩余页面高度，当里面元素多时滚动？

Question

我需要添加一个侧边栏，它占据了页面的其余高度，但是当里面有很多元素时它会在 y 轴上滚动。

我在网上看到的解决方案总是遇到的问题是，一旦里面的元素比页面高，侧边栏就会变大并且没有滚动。

我有两栏，左边一栏有一个 div，上面写着：Jam in your hood...，下面是侧边栏。

右边是一张地图。

我怎样才能让侧边栏...占据页面的剩余 space 但如果里面的元素更高则滚动？

Answer 1

侧边栏默认认为是普通的滚动页面，会向下展开。为防止出现这种情况，请使用 class .sidebar 将元素包装在容器中并添加以下样式：

.sidebar {
  height: 100%;
  overflow: auto;
}

这会将侧边栏缩短到剩余部分 space，并告诉它滚动任何溢出部分。