html - 固定侧边栏和流体内容区域

Question

我试图创建一个像这张图片一样的页面。但我被侧边栏困住了。我试图让它左右浮动。但是有些棘手的问题！试图使侧边栏绝对定位。但是当内容区域很大时，侧边栏背景跟不上内容区域。

谁能帮我创建一个基本结构？

这是我用过的！

aside{
    width: 215px;
    background: #f9f9f9;
    padding:5px 0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main .content{
    background:#fff;
    padding:5px;
    margin-left: 195px;
    height:100%;
}

Answer 1

您可以通过侧边栏上的绝对定位和内容上的边距来做到这一点：http: //jsbin.com/ucihul/1/edit

关键属性是：

1. 在侧边栏和内容的父元素上：position: relative

2. 在侧边栏上：

   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   width: 215px; /* or whatever your fixed width is */
   

3. 在内容 div 上：（margin-left: 215px或任何您的固定宽度）

您还可以在侧边栏和内容中包含内部 div 以进行额外控制（它们在我的演示中，但我没有对它们做任何事情）。

Answer 2

这个怎么样：

HTML

  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

 ​#sidebar { float: left; width: 100px; background: red; }
 #content { margin-left: 100px; background: blue; }​

小提琴：http: //jsfiddle.net/j7dS5/1/

Answer 3

最简单的方法是图形化。制作一个与“.main”区域一样宽且高度为 1 像素的图像，并根据您设置的 div 的宽度进行适当的着色。

.main{
    background:url(images/image.png) top center repeat-y;
}
aside{
    width: 215px;
    padding:5px 0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main .content{
    padding:5px;
    margin-left: 195px;
}