全高可滚动侧边栏

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 。

现场观看。

更新：

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

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

请参阅此处更新。