Q:

CSS full height div with margin?

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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Bad way...</title>
 <style>
  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%;
  }
 </style>
</head>
<body>
<div class='tall'>
 <div class='short'>
  Foo bar baz
 </div>
</div>
</body>
</html>

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 short div is going to have an iframe, which needs to be the full height.
The tall 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.
I know I can do it with JavaScript, but I would really like to get a CSS solution if its possible.

A:

You can use absolute positioning as described here: http://www.alistapart.com/articles/conflictingabsolutepositions/
You can specify all sides of div e.g.
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;

