全高可滚动侧边栏

Question

我目前正在编写一个 Angular 应用程序，该应用程序具有顶部固定的引导导航栏和一个边栏容器，该容器由一个边栏标题和一个显示一些内容的可滚动边栏列表组成。

因此我使用以下 CSS 类：

.main-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 50px;
}

.sidebar-container {
    height: 100%;
    position: fixed;
    padding: 0px;
    margin-top: -50px;
    padding-top: 50px;
    border-right: 1px solid #ddd;
}

.sidebar-header {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.sidebar {
    height: 100%;
    position: relative;
    overflow-y: scroll;
}

还有下面的html代码：

<div class="main-wrapper">      
    <div class="sidebar-container col-xs-3">
        <div class="sidebar-header">
            ...
        </div>
        <div class="sidebar">
            ...
        </div>
    </div>
    <div class="main-view col-xs-9 pull-right">
        ...
    </div>
</div>

以下 jsfiddle 是一个最小的工作示例：

https://jsfiddle.net/j1tuw3vj/8/

我的问题是，侧边栏被移到页面底部之外，因此列表的最后一个元素是不可见的。我无法通过为侧边栏设置负边距和填充来向上移动它，因为我不知道侧边栏标题的实际高度（它的高度可以在不同的视图中改变）。

Answer 1

替换：

/* Scrollable sidebar. */
.sidebar {
    height: 100%;
    position: relative;
    overflow-y: scroll;
}

与：

/* Scrollable sidebar. */
.sidebar {
    height: 85%;
    position: relative;
    overflow-y: scroll;
}

问题是： 您将侧边栏height 调整为100%，位置为relative。

看看Live.

更新：

将此行添加到您的 css 文件中。

.nav-pills li:last-child{
margin-bottom:80px;
}

查看更新Here。