title: Scrollable sidebar with full height
body: <p>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.</p>
  
  <p>Therefor I use the following CSS classes:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>And the following html code:</p>
  
  <p>
      </p>
  
  <pre><code>&lt;div class="main-wrapper"&gt;      
      &lt;div class="sidebar-container col-xs-3"&gt;
          &lt;div class="sidebar-header"&gt;
              ...
          &lt;/div&gt;
          &lt;div class="sidebar"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main-view col-xs-9 pull-right"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The following jsfiddle is a minimal working example:</p>
  
  <p><a href="https://jsfiddle.net/j1tuw3vj/8/" rel="noreferrer">https://jsfiddle.net/j1tuw3vj/8/</a></p>
  
  <p>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).</p>