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

而不是“padding-top：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 个答案: