css - 在固定侧边栏内滚动

Question

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

我认为一个简单的overflow-y: scroll;就足够了。似乎我需要在侧边栏上有一个最大高度，但是将最大高度设置为 100% 没有任何作用。我确信这是一个简单的代码模式，但可惜的是，我的 CSS 技能今天已经抛弃了我。

score 124 · Accepted Answer

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

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

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

score 24 · Accepted Answer

我遇到了同样的问题并使用以下方法修复了它：

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

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

2 回答 2