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

Question

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

主内容 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

你可以这样做：

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>

Answer 2

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

Answer 3

检查这个sn-p，你可以使用纯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>