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

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”区域一样宽的图像和1px高的图像，该图像根据您设置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;
}