CSS全高div与保证金？

Question

我到处寻找，无法弄清楚是否有办法做到这一点。 基本上，我想模仿这个布局，而不使用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解决方案，如果可能的话。

Answer 1

您可以使用此处所述的绝对定位： http ： //www.alistapart.com/articles/conflictingabsolutepositions/

您可以指定div的所有边，例如

position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;

Answer 2

而不是“填充顶部：50px;” in .tall {}使用margin-top：50px;

Answer 3

去掉：

.tall{
   min-height:100%;
  }

以及css3属性。 应该工作正常。 新的css看起来像

.tall{
   background-color:yellow;
   height:100%;
   padding-top:50px;
  }
  .short{
   background-color:blue;
   height:100%;
  }

CSS全高div与保证金？

问题描述

3 个解决方案

解决方案1
2 已采纳 2010-12-17 09:26:15

解决方案2
1 2010-12-17 05:48:49

解决方案3
1 2010-12-17 05:53:17

CSS全高div与保证金？

问题描述

3 个解决方案

解决方案1 2 已采纳 2010-12-17 09:26:15

解决方案2 1 2010-12-17 05:48:49

解决方案3 1 2010-12-17 05:53:17

解决方案1
2 已采纳 2010-12-17 09:26:15

解决方案2
1 2010-12-17 05:48:49

解决方案3
1 2010-12-17 05:53:17