CODEWITHSUNDEEP
htmlcss
Ron
Ron

Reputation: 2790

CSS: Stretch Div to 100% of its parent's height with margin/padding

Currently I'm working on this page (look at Figure1)

Figure1

I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,

<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 until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it) However, since I change it with PNG It seems wierd because of opacity of PNG.

Bottom line is- I need to do something like this:

Figure2

But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :

Figure3

It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.

EDIT: article div's height is implicit so I cannot just set middle part's height.

Upvotes: 6

Views: 8076

Answers (1)

Sjoerd
Sjoerd

Reputation: 75609

Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.

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

Upvotes: 3

Related Questions