0

我最近才开始研究引导程序。我创建了一个非常简单的页面，我希望它占据所有窗口，而不是仅仅换行到内容大小。我专注于 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

4

3 回答 3

2

100% 高度的关键是您需要一个包装器 div 围绕您的所有内容，该 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 及更高版本，则可以使用更简单的解决方案。

于 2013-06-01T00:10:29.310 回答
1

我认为解决方案是height: 100%与overflow: scroll财产一起使用。

于 2013-06-01T08:14:48.823 回答
0

你也可以使用 jQuery

$(document).ready( function() {
    var windowHeight = $(window).height();
    $('body').height(windowHeight);
});
于 2013-06-01T08:20:48.590 回答