title: Height div 100% with a padding
body: <p>I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?</p>
  
  <p>Code Below:</p>
  
  <p>ASPX</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;link rel="Stylesheet" href="test.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="navigation"&gt;
          &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div id="inner"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body
  {
      height:100%;
      width:100%;
      margin:0px;
      padding:0px;
      background-color:Black;
  }
  #wrapper
  {
      height:100%;
      margin:10px;
      background-color:Blue;
  }
  #navigation
  {
      height:100px;
      background-color:Green;   
  }
  #content
  {
      height:100%;
      padding:10px;
      background-color:Orange;
  }
  #inner
  {  
      height:100%;
      width:100%;
      padding:5px;
      background-color:Lime;
  }
  </code></pre>