html - 静态/固定侧边栏和流动内容

Question

我有三个 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*/
}

Answer 1

简单的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(为了不被侧边栏隐藏)。