title: Make child element (with padding) 100% width and height of parent
body: <p>Is it possible to make a child element (with padding) 100% width and height of its parent element?</p>
  
  <p>html:</p>
  
  <pre><code> &lt;div id="parent"&gt;
         &lt;div id="child"&gt;&lt;/child&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>  #child {
      padding: 15px
      }
  </code></pre>
  
  <p>I have tried making the child 100% width/height but this makes the child larger than the parent due to the padding.</p>
  
  <p>I have also tried to make the child position absolute and set top,bottom,left and right to 0 and this works for the width but not the height.</p>
  
  <p>The parent can be a variable size.</p>
  
  <p>In addition needs to work on IE8.</p>