CSS：使用margin / padding将Div拉伸到其父级高度的100％

Question

目前我在这个页面上工作（见图1）

我需要在文章div上制作阴影，由于浏览器的兼容性，我不能使用box-shadow属性 所以我们将背景分为3个部分，

<div class="article">
   <div class="background-top"></div>
   <div class="background-mid"></div>
   <div class="background-bot"></div>
   <div class="contents">
       <!-- contents -->
   </div>
</div>

直到我们将背景图像从包含浅蓝色背景颜色的JPEG更改为PNG才很好。
在我们更改图像文件之前，我可以使用z-index属性。 （将中间部分的高度设置为100％并将顶部/机器人部件放在上面） 但是，因为我用PNG改变它因为PNG的不透明性而显得很奇怪。

底线是 - 我需要做这样的事情：

但是当我使用margin-top / bottom属性将中间部分的高度设置为100％时， 这就是我所得到的（小提琴：http://jsfiddle.net/EaBxP/）：

它应该与 IE6 一起工作，我不能只使用JPEG，因为设计师想要用评论和阴影贴在评论框上。 提前谢谢。

编辑：文章div的高度是隐含的，所以我不能只设置中间部分的高度。

Answer 1

使黄色div相对于容器绝对定位。通过设置顶部和底部而不指定高度，div将获得容器的高度。

div.background-mid {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0px;
    right: 0px;
    background-color: yellow;
}