我正在尝试设置如下所示的布局:
我想为该元素使用 Twitter Bootstrap ，但我知道这可能不是获得像这样的基本布局的最佳方式。我知道如何将页眉和页脚设置为固定在顶部和底部，但我很难让侧边栏宽度恒定且可独立滚动。
我当前的实现在这里:http://jsfiddle.net/Mwkrw/3/ .
我尝试使用 Fixed sidebar navigation in fluid twitter bootstrap 2.0 设置固定侧边栏以及关于堆栈溢出的其他几个类似答案，但当侧边栏比内容长时，它们都会中断，据我所知，没有办法给它一个独立的滚动。
理想情况下，我希望使用纯 css 来执行此操作——没有 javascript。我确信这是可能的，而且我缺乏技能和知识使我无法正确地做到这一点，因此不必要地添加 javascript 代码可能没有意义。 (我还在添加一个 javascript 标签以防万一)
感谢大家的帮助!
编辑:所以我的标题显然不需要固定位置。这是新的改进版本:http://jsfiddle.net/Mwkrw/4/不过，我仍在为这两个可滚动的 div 而苦恼。
最佳答案
神奇之处在于 box-sizing:border-box;。为了与 Firefox、chrome<10 和 safari<5.1 兼容，请添加 -webkit- 和 -moz- 前缀。 IE 从 8.0 开始支持它。
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>very structured layout</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {background:#fff; position:absolute; width:100%; height:100%;}
#main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
#head {background:#f8f; position:absolute; width:100%; height:60px;}
#left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}
</style>
</head>
<body>
<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
<div id='left'>left: width = 250px, height = 100%</div>
<div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>
</body>
</html>
编辑:在 Andres 的解决方案让我意识到我可以实现更好的兼容性之后，我胡思乱想了一下，想出了一个替代解决方案，我认为它也更直观。它在 IE7 中不起作用，但它在 IE8 中起作用。
页面和上面一样，唯一的变化是CSS换成了这样:
* {margin:0; padding:0;}
body {background:#fff;}
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head {background:#f8f; position:absolute; width:100%; height:40px;}
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}
请注意，对于这两个版本，#head 和 #foot 需要有 overflow 属性而不是 visible 如果他们的内容会扩展到页面之外。
关于javascript - 具有固定页眉和页脚、固定宽度侧边栏和灵活内容的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10474354/