是否可以使用 Twitter Bootstrap 创建类似 GMail/GoogleGroups 的布局,以便布局始终适合视口(viewport)(窗口高度)并且边栏和内容区域是 单独滚动?
--------------------------------------------------------------------------
| |
| Fixed top navbar |
--------------------------------------------------------------------------
| | |
| Sidebar | Content area scrollable |
| scrollable |
| | |
| | |
| | |
| | |
|------------------------------------------------------------------------|
最佳答案
您不需要使用 Bootstrap 来创建此布局(我认为 Bootstrap 也不支持它,至少在没有重大修改的情况下不支持)。
当然,您仍然可以对页面上的其他所有内容使用 Bootstrap。如果您真的想要 Google Apps 的外观,则需要调整一些默认的 Bootstrap 样式。
什么是可能的
为了好玩,这里使用我在下面描述的基本技术和各种 Bootstrap 组件快速模仿 Gmail 界面。
演示: http://jsfiddle.net/Ly6wmyr2/1/
这里的代码绝对是演示质量,超出了 Stack Overflow 问题的范围。留给读者自己去剖析吧。
简单分解
演示: http://jsfiddle.net/vLm26g4g/1/
注意事项
- 我们正在使用绝对定位。
- 仅仅因为它是绝对定位的并不意味着它不能响应(如果需要)。
- 使用 100% 高主体内的所有 4 个边定位容器。
- 此方法适用于所有 IE 7+ 浏览器。如果您可以支持 IE8+,使用
box-sizing: border-box
可以使尺寸计算更容易。 - 像这样的布局确实受益于 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;
}
关于javascript - 如何使用 Twitter Bootstrap 创建类似 Gmail 的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15666834/