Scrollable sidebar with full height

Question

I am currently writing on an Angular application that has a top fixed bootstrap navbar and a sidebar container that consists of a sidebar header and a scrollable sidebar list that displays some content.

Therefor I use the following CSS classes:

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

And the following html code:

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

The following jsfiddle is a minimal working example:

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

My problem is, that the sidebar is moved beyond the bottom of the page so the last element of the list is invisible. I cannot move it up by setting a negative margin and a padding to the sidebar, because I don't know the actual height of the sidebar header (its height can change in different views).

Answer 1

Replace:

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

With:

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

The problem is: You adjusted the sidebar height to 100% and the position is relative.

See it Live.

UPDATE:

add this line to your css file.

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

See Update Here.