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的不透明性而显得很奇怪.

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

但是当我将中间部分的高度设置为100%并具有margin-top/bottom属性时,
这就是我所拥有的(小提琴: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;
}