我正在尝试设置一个如下所示的布局：
我想为该项目使用 twitter bootstrap，但我知道这可能不是实现看起来像这样的基本布局的最佳方式。我知道如何将页眉和页脚设置为固定在顶部和底部，但我很难让侧边栏保持恒定宽度并独立滚动。
我目前的实现在这里：http: //jsfiddle.net/Mwkrw/3/。
我尝试使用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>
编辑：在安德烈斯的解决方案让我意识到我可以实现更大的兼容性之后，我搞砸了一点，想出了一个替代解决方案，我认为它也更直观。它在 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除非它们的内容否则会延伸到页面之外。
我通过首先创建一个垂直和水平拉伸 100% 的主容器类来设法获得您在帖子中模拟的布局，这样我们就可以将内容完全拉伸到视口的整个高度。在这个容器 div 中，我创建了另一个容器并在向各个方向拉伸时绝对定位它top, left, bottom, right，我觉得这种方法更干净，因为这样我可以轻松定位页眉和页脚而无需负边距（尝试过这样但是它没有用）。
这是布局的演示：http: //jsfiddle.net/andresilich/gbzTN/1/show ，在此处编辑。
和代码：
CSS
html, body {
height: 100%;
}
.main {
*zoom:1;
}
.main, .row-fluid {
height: 100%;
}
.main:before, .main:after,
.column:before, .column:after {
content: "";
display: table;
}
.main:after,
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
*zoom:1;
}
.column .padding {
padding: 20px;
}
.box {
bottom: 40px;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
.footer {
height: 40px;
width: 100%;
z-index: 100;
background-color: red;
bottom: 0;
left:0;
right:0;
position: fixed;
}
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="main clearfix">
<div class="box">
<div class="row-fluid">
<div class="column span3">
<div class="padding">
.. content ..
</div>
</div>
<div class="column span9">
<div class="padding">
<div class="full span9">
.. content ..
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer clearfix">
<h3>footer</h3>
</div>
编辑：注意到此解决方案在 IE7 中无法按预期工作（在 IE8 及更高版本中完美运行），因此这里有一个针对 IE8 以下所有内容的条件注释，应该可以解决问题并使其按预期工作：
CSS
<!--[if lt IE 8]>
<style type="text/css">
html {
margin: 40px 0px;
overflow: hidden
}
.main {
zoom:1;
}
.column {
overflow-x: hidden !important;
overflow-y: scroll !important;
zoom: 1;
}
.box {
position: relative !important;
min-height: 100%;
height:100%;
zoom: 1;
top:0 !important;
}
.main {
margin: 40px 0px;
}
</style>
<![endif]-->
现在Bootstrap 4出来了，我认为有些人可能会从这种布局中受益，这要归功于 flexbox。
<body class="container-fluid d-flex flex-column h-100 align-items-center px-0">
<div class="row grow w-100">
<div class="header col-12 bg-primary py-2">
Header
</div>
<div class="side col-3 bg-light py-3 pl-0">
Menu
</div>
<div class="main col bg-warning py-3">
Main
</div>
</div>
<div class="row w-100 footer bg-danger">
<div class="col-12 py-3">
Footer
</div>
</div>
</body>
.grow {
flex: 1;
overflow: hidden;
}
.main,.side {
overflow-y: auto;
height:calc(100% - 55px);
}
.footer,.header {
height: 55px;
}