Twitter bootstrap 3 流畅的全高度引导布局

我正在尝试制作一个游戏布局，它会填满整个浏览器窗口，但不会滚动。布局如下所示：

 +----------------------+
 +       Header         +
 +------+---------------+
 +      +               +
 +      +               +
 + Side +    Main       +
 +      +  Fill Height  +
 +      +               +
 +      +               +
 +----------------------+
 +       Footer         +
 +------+---------------+

如有必要，侧边栏应滚动，但不应滚动主要内容。布局应具有响应性：如果浏览器太窄，则侧边位于“页眉”下方，并切换显示方式（页脚也可能消失）

---

我想使用Bootstrap，但是我找不到关于如何实现这种布局的任何细节。在这个显示器中使用引导布局有意义吗？或者我应该只使用绝对位置（%based）对CSS进行编码，并在部分中使用引导窗口小部件？

我认为您可以通过将侧边栏和主要内容放入100%高度/宽度包装中来创建这种布局

请参见Bootply上的示例模板：

编辑：根据页眉和页脚的高度填充边栏包装：

  #sidebar-wrapper {
      height: 100%;
      padding: 50px 0 50px 0; /* pad top and bottom by height of header and footer */
      position: fixed;
      border-right: 1px solid gray;
  }

---

页脚似乎无法正常工作。请注意，左侧面板显示在页脚后面（滚动条被剪裁）。我更新了答案并引导：--相应地填充侧边栏。