Прокручиваемая боковая панель с полной высотой

Question

В настоящее время я пишу на угловом приложении, имеющем верхнюю фиксированную навигационную панель и боковую панель, состоящую из заголовка боковой панели и списка прокручиваемых боковых панелей, который отображает некоторый контент.

Therefor Я использую следующие классы 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; 
} 

См UpdateHere.