流畅的全高引导布局

Question

我正在尝试制作一个填充整个浏览器窗口的游戏布局，但不会滚动。布局是这样的：

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

如有必要，侧边栏应滚动，但主要内容不应该滚动。布局应该是响应性的：如果浏览器太窄，那么侧面会在“标题”下面并切换它的呈现方式（也可能是Footer消失）。

我想使用Bootstrap，但我找不到有关如何实现这种布局的任何细节。甚至在此显示中使用引导程序布局是否有意义？或者我是否应该只使用绝对位置（基于％）对CSS进行编码并在部分中使用引导小部件？

Answer 1

我认为你可以通过将侧边栏和主要内容放在100％高度/宽度的包装中来创建这种类型的布局。

在Bootply上查看此示例模板：http://bootply.com/102032

编辑：根据页眉和页脚的高度填充sidebar_wrapper：

  #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;
  }