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

Answer 2

你可以这样做：

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 3

检查这个片段，您可以使用如下所示的纯CSS执行此操作，或者您可以使用display：inline-block或float元素，但您需要使用javascript设置右div的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

静态/固定侧栏和流体内容

3 个答案: