静态/固定侧栏和流体内容
我有三个DIV，一个是顶部的标题，应该固定（不应滚动），宽度100％，高度50px; 另一个是左边的边栏，它需要是浏览器高度的100％，固定宽度为200px，右边的主要内容是另一个DIV，宽度是流动的，即剩余宽度的100％（总计减去200px ）。
主内容中的内容DIV应该随着内容的增长而垂直滚动，但左侧的侧边栏和标题DIV应保持原样。 YouTube的主页是我想要达到的最佳范例。 我试过所有的位置类型和宽度，但没有成功。 HTML是这样的：
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
编辑：
我尝试的基本CSS代码是：
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
简单的CSS代码：
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
例如：http://jsfiddle.net/rp4ss12b/
你的顶杆和侧杆需要position: fixed; 。 然后，您的主要内容需要有一个margin-top （为了不被顶部栏隐藏）和一个margin-left （为了不被侧栏隐藏）。
你可以这样做：
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>检查这个片段，你可以通过使用纯CSS来做到这一点，如下所示，或者你可以使用display：inline-block或float元素，但是你需要使用javascript设置正确div的宽度。
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>