CSS: Stretch Div đến 100% của chiều cao mẹ với lợi nhuận/padding

Question

Hiện nay tôi đang làm việc trên trang này (nhìn vào Figure1)

tôi cần phải làm cho bóng trên div bài viết và Tôi không thể sử dụng thuộc tính hộp bóng do khả năng tương thích của trình duyệt.
Vì vậy, chúng tôi chia nền thành 3 mảnh như thế này,

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

It was nice đến khi chúng ta thay đổi hình nền để PNG từ JPEG, trong đó có ánh sáng màu xanh background-color rồi.
Trước khi chúng tôi thay đổi tệp hình ảnh, tôi có thể làm điều đó với thuộc tính z-index. (thiết lập chiều cao của phần giữa đến 100% và đặt các phần trên cùng/bot vào nó) Tuy nhiên, vì tôi thay đổi nó bằng PNG Có vẻ như là do độ mờ của PNG.

Bottom line là- tôi cần phải làm một cái gì đó như thế này:

Nhưng khi tôi đặt chiều cao giữa phần để 100% với margin-top/thuộc tính phía dưới,
Đây là những gì tôi đã có (fiddle: http://jsfiddle.net/EaBxP/):

Nó nên làm việc với IE6 và tôi không thể chỉ sử dụng JPEG vì nhà thiết kế muốn gắn bài viết có nhận xét và tô bóng trên hộp nhận xét.
Cảm ơn bạn trước.

EDIT: chiều cao của bài viết div là ẩn nên tôi không thể chỉ đặt chiều cao của phần giữa.

Answer 1

Đặt div màu vàng hoàn toàn được định vị, liên quan đến vùng chứa. Bằng cách đặt cả đầu và cuối mà không chỉ định chiều cao, div sẽ nhận được chiều cao của vùng chứa.

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