滚动固定侧边栏内部

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

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