javascript - 如何使用 Twitter Bootstrap 创建类似 Gmail 的布局

Question

是否可以使用 Twitter Bootstrap 创建类似 GMail/GoogleGroups 的布局，以便布局始终适合视口(viewport)(窗口高度)并且边栏和内容区域是单独滚动？

--------------------------------------------------------------------------
|                                                                        |
|                    Fixed top navbar                                    |
--------------------------------------------------------------------------
|         |                                                              |   
| Sidebar |       Content area scrollable                                |
| scrollable                                                             |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|------------------------------------------------------------------------|

Answer 1

您不需要使用 Bootstrap 来创建此布局(我认为 Bootstrap 也不支持它，至少在没有重大修改的情况下不支持)。

当然，您仍然可以对页面上的其他所有内容使用 Bootstrap。如果您真的想要 Google Apps 的外观，则需要调整一些默认的 Bootstrap 样式。

什么是可能的

为了好玩，这里使用我在下面描述的基本技术和各种 Bootstrap 组件快速模仿 Gmail 界面。

演示: http://jsfiddle.net/Ly6wmyr2/1/

_{这里的代码绝对是演示质量，超出了 Stack Overflow 问题的范围。留给读者自己去剖析吧。}

简单分解

演示: http://jsfiddle.net/vLm26g4g/1/

注意事项

1. 我们正在使用绝对定位。
2. 仅仅因为它是绝对定位的并不意味着它不能响应(如果需要)。
3. 使用 100% 高主体内的所有 4 个边定位容器。
4. 此方法适用于所有 IE 7+ 浏览器。如果您可以支持 IE8+，使用 box-sizing: border-box 可以使尺寸计算更容易。
5. 像这样的布局确实受益于 LESS CSS，因为您可以在一个位置声明基本尺寸。

HTML {
    height: 100%;
}
BODY {
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px;
    background-color: #ddd;
}
#side {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    background-color: #eee;
    overflow: auto;
}
#content {
    position: absolute;
    top: 80px;
    left: 20%;
    bottom: 0;
    right: 0;
    overflow: auto;
}