Bootstrap 侧边栏不可滚动 100% 高度

Question

目前，我的屏幕左侧有一个 Bootstrap 侧边栏。height被设定为100%。但是，当内容超出屏幕底部时，它就无法滚动。

我看到这个 Stack Overflow问题与我的问题非常相似。其中一条评论提到这可能是因为我的身高被设置为 100%。

我尝试将高度设置为 100px，只是为了测试内容是否可以滚动，结果很有效。

所以我的问题是，有没有办法使侧边栏中的内容可滚动并保持高度，而100%不必设置特定的像素值？

编辑：

下面是我当前的 CSS #sidebar-wrapper。

#sidebar-wrapper {
    overflow-y: scroll;
    z-index: 1000;
    position: fixed;
    left: 175px;
    width: 175px;
    height: 100%;
    margin-left: -175px;
    overflow-y: auto;
    background: #222222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 1

更新：

在查看特定于网站的代码后。固定定位的侧边栏需要 CSS 属性top:52px来偏移顶部的侧边栏以适应导航栏的高度52px，并bottom:0px添加该属性以确保侧边栏延伸到浏览器窗口的底部。

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 175px;
    top: 52px;
    bottom: 0px;
    margin-left: -175px;
    overflow-y: auto;
    background: #222222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

旧答案：

以下是来自bootsnipp.com/的一些示例代码以及该代码的简单工作片段。请参考下面的 JSFiddle。

因此，如果代码采用这种格式构造，那么 bootstrap 将在内部处理侧边栏滚动，如果您需要始终添加滚动，则将 CSS 属性添加overflow-y:scroll到 ID#sidebar-wrapper

下面的 CSS 就是我所说的。

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

JSFiddle Demo