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

Question

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

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

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

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

编辑:

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

#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