CSS Twitter bootstrap - 带有可滚动侧边栏的固定布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9997192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap - Fixed layout with scrollable sidebar
提问by Rand
I am trying to implement a simple header + 2 column layout using twitter bootstrap.
我正在尝试使用 twitter bootstrap 实现一个简单的标题 + 2 列布局。
I have a fixed header with 100% width, and I am now trying to have two fixed-width full-height columns with independent scrollbars. Is there any good way to do this with twitter bootstrap?
我有一个 100% 宽度的固定标题，我现在尝试有两个带有独立滚动条的固定宽度全高列。有没有什么好方法可以用 twitter bootstrap 做到这一点？
Here is a picture of the layout I am trying to build 
这是我正在尝试构建的布局的图片
回答by Sourajit Basak
Use bootstrap's 'pre-scrollable' class on your target div. Set div at some fixed max height. Its aesthetically good, as well.
在目标 div 上使用引导程序的“预滚动”类。将 div 设置为某个固定的最大高度。它的美学也很好。
回答by Rand
I found a way to do it. Not sure it's the best, but it does the trick:
我找到了一种方法。不确定它是最好的，但它确实有效：
<html>
<head>
<link rel="stylesheet" media="screen" href="normalize.css">
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
header contents
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="span8 scrollable">
<div class="pad40-top">
main contents
</div>
</div>
<div class="span4 scrollable">
<div class="pad40-top">
right sidebar contents
</div>
</div>
</div>
</div>
</body>
