全高可滾動側邊欄

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;
}

請參閱此處更新。