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

【问题标题】：Fixed sidebar and fluid content area固定侧边栏和流体内容区域
【发布时间】：2015-09-07 20:28:29
【问题描述】：

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

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

这是我用过的！

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 css

【解决方案1】：

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

关键属性是：

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

在侧边栏上：

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

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

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

【讨论】：

我们不能设置bottom:0 如果内容区域大于屏幕高度，侧边栏不会调整它的高度！

【解决方案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/

【讨论】：

侧边栏不限内容高度！！

【解决方案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;
}

【讨论】：