CSS: Estiramiento Div al 100% de la altura de su padre con el margen/relleno de

Question

Actualmente estoy trabajando en esta página (mire Figura 1)

necesito para hacer sombra en el artículo div y No puedo usar el atributo de sombreado de caja debido a la compatibilidad del navegador.
Así se divide el fondo en 3 piezas como esta,

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

fue agradable hasta que cambiemos la imagen de fondo a PNG de JPEG que contiene azul claro color de fondo ya.
Antes de cambiar los archivos de imagen, podría hacerlo con la propiedad z-index. (Establezca la altura de la parte central en 100% y coloque las partes superiores/bot) Sin embargo, dado que lo cambio con PNG Parece extraño debido a la opacidad de PNG.

En pocas es- Necesito hacer algo como esto:

Pero cuando me puse la altura de la parte media de 100% con un margen superior/atributos de fondo,
Esto es lo tengo (violín: http://jsfiddle.net/EaBxP/):

debería trabajo con IE6 y no puedo usar JPEG porque el diseñador quiere hacer un artículo en barra con comentarios y sombrear sobre el cuadro de comentarios.
Gracias de antemano.

EDIT: la altura del artículo div es implícita, por lo que no puedo simplemente establecer la altura de la parte central.

Answer 1

Haga que el div amarillo se posicione absolutamente, en relación con el contenedor. Al establecer tanto la parte superior como la inferior sin especificar una altura, el div obtendrá la altura del contenedor.

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