Html 固定边栏和流体含量区域

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

有人能帮我创建一个基本的结构吗

这就是我用过的

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

这个怎么样：

HTML

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

---

Fiddle:

最简单的方法是以图形方式进行。制作一个与“.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;
}

---

您可以通过侧边栏上的绝对定位和内容上的边距来实现：

关键属性包括：

在侧边栏和内容的父元素上：

position:relative

在侧边栏上：

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

在内容分区上：

左边距：215px

（或任何固定宽度）

---

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

您可以发布代码吗？侧边栏不限于内容高度！！我们无法设置

底部：0

如果内容区域大于屏幕高度，侧边栏将不会调整其高度！

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