Question

我最近才开始研究引导程序。我创建了一个非常简单的页面，我希望它能够占用所有窗口而不是仅仅包装到内容大小。我专注于webkit浏览器。我希望内容在高度和宽度方面占据100％的页面。宽度已经完成，但我有100％高度的小片。

我在Stack Overflow上的类似问题中尝试了以下解决方案：

  html{
    min-height: 100%; /* real browsers */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treated as min-height*/
  }
  body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    min-height: 100%; /* real browsers */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treated as min-height*/
  }

但它没有效果。

此：

  html{
    height: 100%;
  }
  body {
    background-color: #FFF;
    height: 100%;
  }

占用太多空间 - 它太高而且会出现滚动条。

我应该怎样做才能实现目标？

完整代码在此处：https://gist.github.com/LucasSeveryn/d1590bcafbf6e23b1239

Answer 1

100％高度的关键是你需要一个包含所有内容的包装器div，它也设置为min-height: 100%。这是你添加了额外包装的代码（为了演示目的我给了它一个红色背景）：

<!DOCTYPE html>
<html>
<head>
  <title>ActRecognitionWeb</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/backbone.js"></script>
    <script src="js/underscore.js"></script>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  <style type='text/css'>
  html{
    height: 100%;
  }
  body {
    background-color: #FFF;
    height: 100%;
    margin: 0; padding: 0;
  }

  .wrap {min-height: 100%; background: red;}

  #login-screen
  {
    background-image: url('img/login_background.jpg');
    padding-top: 40px;
    height: 100%;
    padding: 60px;
    padding-right: 200px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
  }

  .container-fluid
  {
   padding-top: 40px;
   height: 100%;
   padding: 60px;
   padding-right: 200px;
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 200;
   line-height: 30px;
 }

 #login-sidebar
 {
  text-align: right;
  opacity:0.8;
  padding-top: 10%;

}
.navbar .brand
{
  padding-left: 30px;
}

h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

</style>
</head>
<body>
<div class="wrap">
  <div class="container">
    <div class='navbar navbar-inverse navbar-fixed-top'>
      <div class='navbar-inner' style="height: auto;" >
        <a class="brand" href="#">ActRecognition</a>
        <ul class="nav" data-bind="visible: loggedIn()">
          <li class="active"><a href="#">Summary</a></li>
          <li><a href="#">Challenges</a></li>
          <li><a href="#">Routes</a></li>
        </li>
      </ul>
      <ul class="nav pull-right" data-bind="visible: loggedIn()">
        <li class="dropdown" >
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span data-bind="text: userName"></span>
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#">Log Out</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
<script type='text/javascript' src='js/knockout-2.2.1.js'></script>
<script src='js/viewModel.js'></script>

</html>

这里有一个很棒的螺母和螺栓教程：

http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1243541#post1243541

如果您只是针对IE8及更高版本，则使用更简单的解决方案。

Answer 2

我认为解决方案是height: 100%使用overflow: scroll属性。

Answer 3

您也可以使用jQuery

$(document).ready( function() {
    var windowHeight = $(window).height();
    $('body').height(windowHeight);
});

如何使页面占据整个浏览器窗口？

3 个答案: