侧边栏占据页面高度的其余部分，并在内部有许多元素时滚动？

Question

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

我总是在网上看到的解决方案的问题是，只要内部元素高于页面，侧边栏就会增长，并且没有滚动。

我有两个列，左边有一个div，它表示：Jam in your hood...，下面是侧边栏。

在右边是一张地图。

我怎么能有侧边栏...占据页面的空间，但如果里面的元素更高，滚动？

Answer 1

边栏默认认为这是一个正常的滚动页面，并且会向下扩展。要防止它，请使用类.sidebar将元素包装在容器中，并添加以下样式：

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

这会将侧边栏缩短到剩余空间，并告诉它滚动它所有的溢出。