title: Bootstrap, fixed left offcanvas sidebar with scrollable content in the center
body: <p>I want to create a template for a project that i am working on using Bootstrap and i have a problem with the behavior of the offcanvas sidebar. I want the sidebar to take all the space below the header and to not be scrollable. I have found two templates, that combined do what i want but i have a problem merging them as i am not very good with css. I have tried a lot to do but i can't figure how to do it. Here is a picture showing the desired functionality/behavior of the template i want to make:
  <img src="https://i.stack.imgur.com/6KHQ7.png" alt="enter image description here"></p>
  
  <p>Here are the two templates i have found:</p>
  
  <ul>
  <li><a href="http://getbootstrap.com/examples/dashboard/" rel="nofollow noreferrer">Dashboard</a></li>
  <li><a href="http://www.bootply.com/render/128936" rel="nofollow noreferrer">Dashboard (with off-canvas sidebar)</a></li>
  </ul>
  
  <p>And here is the code (HTML+CSS) of each template (stripped down) so you can easily figure out how they work:</p>
  
  <p><strong>Dashboard - fixed sidebar</strong></p>
  
  <ul>
  <li><p>HTML</p>
  
  
  
  <pre><code>&lt;div class="row"&gt;
  
      &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
          &lt;ul class="nav nav-sidebar"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Analytics&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Export&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"&gt;
          &lt;h1 class="page-header"&gt;Dashboard&lt;/h1&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  </li>
  <li><p>CSS: <a href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="nofollow noreferrer">getbootstrap.com/examples/dashboard/dashboard.css</a></p></li>
  </ul>
  
  <p><strong>Dashboard (with off-canvas sidebar) - scrollable</strong></p>
  
  <ul>
  <li><p>HTML</p>
  
  
  
  <pre><code>&lt;div class="row row-offcanvas row-offcanvas-left"&gt;
  
      &lt;div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar"&gt;
          &lt;ul class="nav nav-sidebar"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Analytics&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Export&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-9 col-md-10 main"&gt;
          &lt;h1 class="page-header"&gt;Dashboard&lt;/h1&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  </li>
  <li><p>CSS: <a href="http://textuploader.com/k6ae" rel="nofollow noreferrer">http://textuploader.com/k6ae</a></p></li>
  </ul>