如何使頁面成爲整個瀏覽器窗口？

我只是最近纔開始研究bootstrap。我創建了一個非常簡單的頁面，並且我希望它能夠將所有的窗口都轉換爲內容大小。我專注於webkit瀏覽器。我希望內容佔據頁面高度和寬度的100％。寬度已經完成，但我有100％的身高。如何使頁面成爲整個瀏覽器窗口？

我試圖從堆棧溢出類似的問題，以下解決方案：

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

來源

2013-05-31 LucasSeveryn

對不起，overread it..it's晚在這裏...刪除答案.. –

我認爲解決方案是使用height: 100%與overflow: scroll屬性。

來源

2013-06-01 08:14:48

是的，這是我最後使用的那個。 – LucasSeveryn

的關鍵在於100％的高度是你需要周圍所有的內容也設置爲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-01 00:10:29

編輯：讓我試一下，我想我錯過了一些東西 – LucasSeveryn

這似乎爲我工作。你爲什麼說它不起作用？你的期望是什麼？你期望看到該頁面是否比視口更高？ –

當頁面較高時，我期望看到一個滾動條。這是我看到您的解決方案：http://i.imgur.com/mLQMM0c.png 我想看到的是包含完全擴展到瀏覽器區域的圖片的框。 – LucasSeveryn

您還可以使用jQuery

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

來源

2013-06-01 08:20:48

如何使頁面成爲整個瀏覽器窗口？

回答

相關問題