I'm trying set up a layout that will look like this: 
我正在尝试设置一个如下所示的布局：
I want to use twitter bootstrap for the project, but I understand it may not be the best way to go for the basic layout that looks like this. I know how to setup the header and footer to be fixed at the top and bottom, but I have a hard time having my sidebar constant width and independently scrollable.
我想为项目使用twitter bootstrap，但我知道它可能不是最好的方法来获得这样的基本布局。我知道如何设置页眉和页脚固定在顶部和底部，但我很难让我的侧边栏恒定宽度和独立滚动。
My current implementation is here: http://jsfiddle.net/Mwkrw/3/.
我目前的实现在这里：http：//jsfiddle.net/Mwkrw/3/。
I tried setting up the fixed sidebar using Fixed sidebar navigation in fluid twitter bootstrap 2.0 and a couple of other similar answers on stack overflow, but they all break when the sidebar is longer than the content and as far as I know there is no way to give it an independent scroll.
我尝试在流畅的twitter bootstrap 2.0中使用固定侧边栏导航设置固定边栏，并在堆栈溢出时使用其他几个类似的答案，但是当侧边栏比内容长时它们都会中断，据我所知，没有办法给它一个独立的卷轴。
I would ideally like to do this with pure css - no javascript. I'm sure it's possible and it's my lack of skill and knowledge that prevents me form doing it properly, so there may be no point in unnecessarily adding javascript code. (I'm still adding a javascript tag in case it's not possible)
理想情况下我喜欢用纯css做这个 - 没有javascript。我确信这是可能的，这是我缺乏技能和知识阻止我正确地做到这一点，所以没有必要添加javascript代码。 （我还在添加一个javascript标签，以防万一）
Thanks for all the help!
感谢您的帮助！
EDIT: So my header clearly did not need to be position fixed. Here is the new and improved version: http://jsfiddle.net/Mwkrw/4/ I'm still struggling with the two scrollable divs though.
编辑：所以我的标题显然不需要固定位置。这是新的和改进版本：http：//jsfiddle.net/Mwkrw/4/我仍然在努力使用两个可滚动的div。
3 个解决方案
#1
13
The magic is in box-sizing:border-box;. For compatibility with Firefox, chrome<10, and safari<5.1, add the -webkit- and -moz- prefixes. IE supports it as of 8.0.
神奇的是盒子大小：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>
小提琴
edit: after Andres' solution made me realize I could achieve greater compatibility, I messed around a bit and came up with an alternate solution, which I think is more intuitive as well. It doesn't work in IE7, but it does work in IE8.
编辑：在Andres的解决方案让我意识到我可以实现更大的兼容性之后，我搞砸了一些并提出了一个替代解决方案，我认为它也更直观。它在IE7中不起作用，但它在IE8中有效。
The page is the same as the above, with the only change being that the CSS is replaced with this:
该页面与上面的相同，唯一的变化是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;}
小提琴
Note that, for both versions, #head and #foot need to have an overflow property other than visible if their content would otherwise extend off the page.
请注意，对于这两个版本，＃head和#foot需要具有除可见之外的溢出属性，否则它们的内容将延伸到页面之外。
#2
9
I managed to get the layout you mocked up in your post by first creating a main container class that is stretched 100% both vertically and horizontally, this way we can fully stretch the content within to the full height of your viewport. Within this container div i created another container and positioned it absolutely while stretching it in all directions, top, left, bottom, right, i felt that this method was cleaner cause this way i can easily position the header and footer without the need for negative margins (tried it like that but it didn't work).
我设法通过首先创建一个纵向和横向100％拉伸的主容器类来获得您在帖子中模拟的布局，这样我们就可以将内容完全拉伸到视口的整个高度。在这个容器div中我创建了另一个容器，并且在向所有方向（顶部，左侧，底部，右侧）伸展它时绝对定位它，我觉得这种方法更干净，因为这样我可以轻松定位页眉和页脚而不需要负面边缘（尝试过这样，但它不起作用）。
Here is a demo of the layout: http://jsfiddle.net/andresilich/gbzTN/1/show, edit here.
这是一个布局演示：http：//jsfiddle.net/andresilich/gbzTN/1/show，在这里编辑。
And the code:
和代码：
CSS
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
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>
Edit: noticed that this solution does not work as expected in IE7 (works perfect in IE8 and above) so here is a conditional comment targeting everything below IE8 that should fix the issue and make it work as expected:
编辑：注意到这个解决方案在IE7中不能正常工作（在IE8及以上版本中完美运行）所以这里是针对IE8下面的所有内容的条件注释，它应该解决问题并使其按预期工作：
CSS
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]-->
#3
0
Now that Bootstrap 4 is out I thought some may benefit from this layout which is now a little easier thanks to flexbox.
现在Bootstrap 4已经出来了，我觉得有些人可能会受益于这种布局，现在由于flexbox而变得更容易了。
Bootstrap 4演示
<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;
}
#1
13
The magic is in box-sizing:border-box;. For compatibility with Firefox, chrome<10, and safari<5.1, add the -webkit- and -moz- prefixes. IE supports it as of 8.0.
神奇的是盒子大小：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>
小提琴
edit: after Andres' solution made me realize I could achieve greater compatibility, I messed around a bit and came up with an alternate solution, which I think is more intuitive as well. It doesn't work in IE7, but it does work in IE8.
编辑：在Andres的解决方案让我意识到我可以实现更大的兼容性之后，我搞砸了一些并提出了一个替代解决方案，我认为它也更直观。它在IE7中不起作用，但它在IE8中有效。
The page is the same as the above, with the only change being that the CSS is replaced with this:
该页面与上面的相同，唯一的变化是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;}
小提琴
Note that, for both versions, #head and #foot need to have an overflow property other than visible if their content would otherwise extend off the page.
请注意，对于这两个版本，＃head和#foot需要具有除可见之外的溢出属性，否则它们的内容将延伸到页面之外。
#2
9
I managed to get the layout you mocked up in your post by first creating a main container class that is stretched 100% both vertically and horizontally, this way we can fully stretch the content within to the full height of your viewport. Within this container div i created another container and positioned it absolutely while stretching it in all directions, top, left, bottom, right, i felt that this method was cleaner cause this way i can easily position the header and footer without the need for negative margins (tried it like that but it didn't work).
我设法通过首先创建一个纵向和横向100％拉伸的主容器类来获得您在帖子中模拟的布局，这样我们就可以将内容完全拉伸到视口的整个高度。在这个容器div中我创建了另一个容器，并且在向所有方向（顶部，左侧，底部，右侧）伸展它时绝对定位它，我觉得这种方法更干净，因为这样我可以轻松定位页眉和页脚而不需要负面边缘（尝试过这样，但它不起作用）。
Here is a demo of the layout: http://jsfiddle.net/andresilich/gbzTN/1/show, edit here.
这是一个布局演示：http：//jsfiddle.net/andresilich/gbzTN/1/show，在这里编辑。
And the code:
和代码：
CSS
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
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>
Edit: noticed that this solution does not work as expected in IE7 (works perfect in IE8 and above) so here is a conditional comment targeting everything below IE8 that should fix the issue and make it work as expected:
编辑：注意到这个解决方案在IE7中不能正常工作（在IE8及以上版本中完美运行）所以这里是针对IE8下面的所有内容的条件注释，它应该解决问题并使其按预期工作：
CSS
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]-->
#3
0
Now that Bootstrap 4 is out I thought some may benefit from this layout which is now a little easier thanks to flexbox.
现在Bootstrap 4已经出来了，我觉得有些人可能会受益于这种布局，现在由于flexbox而变得更容易了。
Bootstrap 4演示
<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;
}