Html 静态/固定侧栏和流体含量

我有三个div，一个是顶部的标题，应该是固定的（不应该滚动），宽度100%，高度50px；另一个是左边的边栏，它需要是浏览器高度的100%，固定宽度为200px，右边的主内容的另一个DIV的宽度是流动的，即剩余宽度的100%（总宽度减去200px）

主Content DIV中的内容应该随着内容的增长而垂直滚动，但是左侧的边栏和header DIV应该保持原样。YouTube的主页就是我想要实现的完美例子。我尝试了所有的位置类型和宽度，但没有成功。HTML是这样的：

<div id="header"></div>
<div id="parent">
    <div id="sidebar"></div>
    <div id="main-content"></div>
</div>

你可以这样做：

html，正文{
身高：100%；
保证金：0；
}
#标题{
宽度：100%；
高度：50px；
背景色：红色；
位置：固定；
z指数：999；
}
#母公司{
宽度：100%；
身高：100%；
}
#边栏{
填充顶部：50px；/*填充顶部必须与收割台高度相同*/
宽度：200px；
身高：100%；
背景颜色：蓝色；
框大小：边框框；
位置：固定；
z指数：99；
}
#主要内容{
位置：相对位置；
宽度：100%；
左侧填充：200px；/*左侧填充必须与侧边栏宽度相同*/
高度：300px；/*这可以是任何内容，内容应垂直滚动*/
背景：绿色；
框大小：边框框；
填充顶部：50px；/*填充顶部必须与收割台高度相同*/
}

简单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;
}

例如：

---

您的顶栏和侧栏需要

位置：固定。然后，您的主要内容需要有一个
页边空白顶部
（为了不被顶部栏隐藏）和一个
页边空白左侧
（为了不被侧栏隐藏）。
检查此片段，您可以使用如下所示的纯css来实现这一点，也可以使用display:inline块或float元素，但需要使用javascript设置右div的宽度。
html，正文{宽度：100%；高度：100%；边距：0；填充：0；}
#标题{位置：固定；高度：50px；宽度：100%；背景：#000；顶部：0；左侧：0；}
#父项{背景：红色；宽度：100%；高度：100%；显示：表格；边框折叠：折叠；}
#父div{display:table cell；padding top:50px；}
#边栏{宽度：200px；背景：#444；颜色：#fff；}
#主要内容{background:#ccc；padding:0；margin:0；}

萨德斯
dshajkashljk
Ohh，您没有使用任何高度100%，而是使用位置0。这太完美了，我在侧边栏中制作了顶部：50px，这样侧边栏就位于标题下方。我不喜欢使用宽度100%或高度100%，因为它限制了你添加填充物和边框。你的代码非常适合Chrome，但在IE8中，内容水平向右滚动200px以上。@对于我来说，在IE8文档模式下工作正常，请尝试全屏演示-标题与侧边栏和主要内容重叠。在IE8中，主要内容的内容显示在侧边栏中。您现在可以检查它并确保它是否工作正常吗。目前我在mac上。
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;
}