Static/Fixed Sidebar and Fluid Content

I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).

Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:

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

Edit:

Basic CSS code I am trying is:

#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*/
}

---

Simple css code :

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

Example : http://jsfiddle.net/rp4ss12b/

Your top bar and side bar need to be position: fixed; . Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).

---

你可以这样做：

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>

链接地址: http://www.djcxy.com/p/88340.html

上一篇: 引导响应网格问题

下一篇: 静态/固定侧栏和流体内容