在进行网站建设的时候，不管是做普通的企业网站还是门户类等几乎任何类型的网站，我们经常可能有这样的一个需求，那就是我们要有一个边栏，这个边栏得有背景颜色，而且它的高度随着内容的主体高度而变。就好像下图这样的：

这个看上去非常容易，当然实际上也是比较容易的；但往往大家在解决这个需求的时候要么忽略一些问题而导致可用性较差，要么就使用了虽然能解决，但不是特别极致的解决方案。

首先，我们要知道内容主体区域的高度是可变的（比如文章的内页，高度可能随着文章内容的多少而变化），如果给边栏一个具体的高度值那，若这个高度值较小，那么遇到内容较多的时候，那么边栏的下面就成了跟内容区域一样的的背景（被留白了）；反之，如果这个高度值设的足够大，那对于大多数内容来讲，下面会被留白太多，这样显然是要不得的。

除此之外，我们看到有很多网站使用到的两种方法，一种是给边栏和内容主体区域的父级标签给个宽度等于边栏的背景图片；而另外一种则是用js来动态获取内容高度然后又通过dom把这个值赋给边栏。而且前者使用得最为普遍。

而实际上有一种方式，可以不实用js，也不实用背景图片，维护起来特别方便。那就是采用position: absolute;我们通常在使用绝对定位的时候一般是使用一个或者两个值，用得较多的是两个边距值，比如这里我们用到了top: 0和left: 0。这样实际上还是没能达到我们的需求，边栏还是只有边栏本身内容“撑破”的高度。而实际上只要加上一个CSS属性的值就可以实现我们的目标了，那就是加上bottom: 0，这样我们的问题就解决了。

当然上面说的加这些东西只是针对上面效果的而言的，具体的需要根据实际变化；而且实际上可以通过这个实例得到很多其他的应用技巧；当然，针对这个也许还存在更好的方法。