Question

我正在使用Bootstrap做一个非常简单的登录页面。这个想法是让一个英雄单元文本元素覆盖整个页面，而不管窗口大小。 width: 100%; CSS指令运行良好，但height: 100%;无效 - 英雄单位元素仍然高约200px并且附加到窗口的顶部。如何将英雄单位的身高设置为100％？提前谢谢。

Answer 1

你必须在height:100%和html标签上设置body，如果英雄div有父母，那么它也需要它。

示例http://jsfiddle.net/xExSE/

Answer 2

这似乎工作正常：

<html>
<head>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- css -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />
  <style>
    .hero-unit {
      height: 100%;
      background-color: green;
    }
  </style>
</head>

<body>
    <div class="hero-unit">
      <h1>Full Page Hero!</h1>
    </div>
</body>
</html>

如何将Bootstrap英雄单位高度设置为100％？

2 个答案: