Question

我目前在屏幕左侧有一个Bootstrap边栏。 height设置为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 < / p>

以下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

Bootstrap边栏不可滚动100％高度

1 个答案: