title: CSS: Stretch Div to 100% of its parent's height with margin/padding
body: <p>Currently I'm working on this page (look at Figure1)</p>
  
  <p><img src="https://i.stack.imgur.com/spDmQ.png" alt="Figure1"></p>
  
  <p>I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.<br />
  So we divide the background into 3 pieces like this,</p>
  
  <pre><code>&lt;div class="article"&gt;
     &lt;div class="background-top"&gt;&lt;/div&gt;
     &lt;div class="background-mid"&gt;&lt;/div&gt;
     &lt;div class="background-bot"&gt;&lt;/div&gt;
     &lt;div class="contents"&gt;
         &lt;!-- contents --&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It was nice until we change background image to PNG from JPEG which contains light-blue background-color already. <br/>
  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.<br /><br /></p>
  
  <p>Bottom line is- I need to do something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/RKgxz.png" alt="Figure2"></p>
  
  <p>But when I set middle part's height to 100% with margin-top/bottom attributes, <br />
  This is what I've got(fiddle: <a href="http://jsfiddle.net/EaBxP/" rel="noreferrer">http://jsfiddle.net/EaBxP/</a>) : </p>
  
  <p><img src="https://i.stack.imgur.com/W6UHQ.png" alt="Figure3"></p>
  
  <p>It should work with <strong>IE6</strong> and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.<br />
  Thanks in advance.</p>
  
  <p><strong>EDIT</strong>: article div's height is implicit so I cannot just set middle part's height.</p>