CSS全高div与保证金?

我到处寻找,无法弄清楚是否有办法做到这一点。基本上,我想模仿这个布局,而不使用CSS3属性:
<!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>
我不关心有多少额外的标记或CSS,只要它的跨浏览器兼容。我只会满足于'人造柱',但在这种情况下它不会起作用。
short
div将有一个iframe,需要是全高。
tall
div就是为了显示它应该是什么样子。我想要的只是一个全高的div,但顶部有50px的余量。我的所有尝试都只是将高度扩展到100%+ 50px。 我知道我可以用JavaScript做到这一点,但我真的希望得到一个CSS解决方案,如果可能的话。     
已邀请:
您可以使用此处所述的绝对定位:http://www.alistapart.com/articles/conflictingabsolutepositions/ 您可以指定div的所有边,例如
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;
    
而不是“填充顶部:50px;” in .tall {}使用margin-top:50px;     
去掉:
.tall{
   min-height:100%;
  }
以及css3属性。应该工作正常。新的css看起来像
.tall{
   background-color:yellow;
   height:100%;
   padding-top:50px;
  }
  .short{
   background-color:blue;
   height:100%;
  }
    

要回复问题请先登录注册