全高可滾動邊欄

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。

UPDATE：

將此行添加到您的CSS文件。

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

請參閱更新Here。