Bootstrap`s sidebar with fixed footer and scrollable div
<p>As you see from the picture below the part of sidebar where I have scrollable TreeView didnt work, also I need to have fixed footer to this sidebar that doesn't move when user scroll the sidebar. How to fix it?
<a href="https://i.stack.imgur.com/xym5L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xym5L.jpg" alt="enter image description here"></a></p>

<p>I want to have next structure.
<a href="https://i.stack.imgur.com/lv8QQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lv8QQ.jpg" alt="enter image description here"></a></p>

<p><strong>.html</strong></p>

<pre><code>&lt;div class="container-fluid max-height no-overflow"&gt;
        &lt;div class ="row max-height"&gt;
            &lt;form runat="server"&gt;
                    &lt;!--SIDEBAR--&gt;
                    &lt;div class="col-sm-3 sidebar"&gt;

                        &lt;div class="panel-body  scrollable"&gt;
                            TREEVIEW HERE
                        &lt;/div&gt;

                        &lt;div class="panel-footer center-block"&gt;
                            BUTTON HERE
                        &lt;/div&gt;
                    &lt;/div&gt;  

                &lt;!--MAIN CONTENT--&gt;
                &lt;div class="col-sm-offset-3 main scrollable"&gt;
                    MAIN CONTENT HERE
                &lt;/div&gt;
            &lt;/form&gt;
         &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>css:</strong></p>

<pre><code>        .scrollable {
            height: 100%;
            overflow: auto;
        }
        .max-height {
            height: 100%;

        }
        .no-overflow {
            overflow: hidden;
        }
        .sidebar {
            display: none;
        }
        @media (min-width: 768px) {
            .sidebar {
                position: fixed;
                bottom: 0;
                left: 0;
                z-index: 1000;
                display: block;
                overflow-x: auto;
                overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
                background-color: #f5f5f5;
            }
        }
        .main {
            padding-top: 20px;

        }
        @media (min-width: 768px) {
            .main {
                padding-right: 20px;
                padding-left: 20px;

            }
        }
        .panel-body{
            overflow: auto;
        }
        .panel-footer{
            background-color:#ff6a00;
        }
</code></pre>