title: CSS 100% height with padding/margin
body: <p>With HTML/CSS, how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?</p>
  
  <p>By "proper" I mean that if my parent element is <code>200px</code> tall and I specify <code>height = 100%</code> with <code>padding = 5px</code> I would expect that I should get a <code>190px</code> high element with <code>border = 5px</code> on all sides, nicely centered in the parent element.</p>
  
  <p>Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:</p>
  
  <pre class="lang-css prettyprint-override"><code>#myDiv {
      width: 100%
      height: 100%;
      padding: 5px;
  }
  </code></pre>
  
  <p>But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?</p>
  
  <p>Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier. </p>
  
  <p><strong>EDIT:</strong> Since an example was asked for, here's the simplest one I can think of:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html style="height: 100%"&gt;
      &lt;body style="height: 100%"&gt;
          &lt;div style="background-color: black; height: 100%; padding: 25px"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.</p>