title: CSS full height div with margin?
body: <p>I've looked everywhere, and can't figure out if there's a way to do this. Basically, I want to mimic this layout, without using the CSS3 attributes:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Bad way...&lt;/title&gt;
   &lt;style&gt;
    html,body{
     margin:0px;
     height:100%;
    }
    .tall{
     background-color:yellow;
     min-height:100%;
     height:100%;
     padding-top:50px;
  
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
    }
    .short{
     background-color:blue;
     height:100%;
    }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='tall'&gt;
   &lt;div class='short'&gt;
    Foo bar baz
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't care how much extra markup or CSS there is, as long as its cross-browser compatible. I would just settle with the ol' faux columns, but it won't work in this situation. The <code>short</code> div is going to have an iframe, which needs to be the full height.</p>
  
  <p>The <code>tall</code> div is just there to show what its supposed to look like. All I want, is a div that is full height, but with a 50px margin on top. All of my attempts just extend the height to 100% + 50px.</p>
  
  <p>I know I can do it with JavaScript, but I would really like to get a CSS solution if its possible.</p>