滚动固定侧边栏内部

Question

我的网站左侧有一个固定的侧边栏，内容太多，无法在屏幕上显示。如何在允许右侧滚动的同时使该内容可滚动？

我认为简单的overflow-y: scroll;就足够了。看起来我需要在侧边栏上设置最大高度，但将max-height设置为100％则无效。我确信这是一个简单的代码模式，但是唉，我的CSS技能今天让我感到厌烦。

这里的简单示例： http://jsfiddle.net/tvysB/1/

Answer 1

将top和bottom设置为0，以便侧边栏与视口的高度完全相同：

#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

这是你的小提琴：http://jsfiddle.net/tvysB/2/

Answer 2

我有同样的问题并使用以下方法修复：

.WhateverYourNavIs {
      max-height: calc(100vh - 9rem);
      overflow-y: auto;
 }

这会以一种响应用户浏览器高度的方式设置导航的最大高度，然后在需要时为其滚动。