Bootstrap，固定左侧离线扫描侧边栏，中间有可滚动内容

Question

我想为正在使用Bootstrap工作的项目创建一个模板，我对offcanvas侧边栏的行为有疑问。我希望侧边栏占据标题下方的所有空格并且不可滚动。我找到了两个模板，组合做我想要的但我有一个问题合并它们因为我不是很好用css。我已经尝试了很多事情，但我不知道该怎么做。这是一张图片，显示了我想要制作的模板的所需功能/行为：

以下是我找到的两个模板：

• Dashboard
• Dashboard (with off-canvas sidebar)

以下是每个模板的代码（HTML + CSS）（精简版），以便您轻松了解它们的工作原理：

信息中心 - 修复了侧栏

• HTML

  <div class="row">
  
      <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
              <li class="active"><a href="#">Overview</a></li>
              <li><a href="#">Reports</a></li>
              <li><a href="#">Analytics</a></li>
              <li><a href="#">Export</a></li>
          </ul>
      </div>
  
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Dashboard</h1>
      </div>
  
  </div>
  

• CSS：getbootstrap.com/examples/dashboard/dashboard.css

信息中心（带有非画布边栏） - 可滚动

• HTML

  <div class="row row-offcanvas row-offcanvas-left">
  
      <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar">
          <ul class="nav nav-sidebar">
              <li class="active"><a href="#">Overview</a></li>
              <li><a href="#">Reports</a></li>
              <li><a href="#">Analytics</a></li>
              <li><a href="#">Export</a></li>
          </ul>
      </div>
  
      <div class="col-sm-9 col-md-10 main">
          <h1 class="page-header">Dashboard</h1>
      </div>
  
  </div>
  

• CSS：http://textuploader.com/k6ae