title: Bootstrap`s sidebar with fixed footer and scrollable div
body: <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>