静态/固定侧栏和流体内容 [英] Static/Fixed Sidebar and Fluid Content

问题描述

我有三个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; 
宽度：100％; 
 height：50px; 
} 
 #sidebar {
 position：fixed; 
 width：220px; 
身高：100％; 
} 
＃main-content {
 position：relative; 
 left：220px; 
宽度：100％; 
 height：300px; / *这可能是任何东西，内容应该垂直滚动* / 
} 
  

解决方案

简单的css代码：

  body {
 padding：0; 
保证金：0; 
} 
 #header {
 position：fixed; 
 top：0px; 
 left：0px; 
 right：0px; 
 height：50px; 
背景颜色：红色; 
} 
 #sidebar {
 position：fixed; 
 top：0px; 
 left：0px; 
 bottom：0px; 
 width：200px; 
 background-color：green; 
} 
 #parent {
 margin-top：50px; 
 margin-left：200px; 
 background-color：blue; 
 
 $ / code> 

示例：
http://jsfiddle.net/rp4ss12b/



您的顶栏 em>和侧栏需要 position：fixed; 。那么你的主要内容需要有一个 margin-top （为了不被顶栏隐藏）和一个 margin-left （为了不被侧栏隐藏）。

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).

这篇关于静态/固定侧栏和流体内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！