與Twitter的全身背景Bootstrap

我想在使用Twitter的Bootstrap框架的新項目上工作，但我有一個問題。我想要一個完整的背景，但背景似乎僅限於容器div的高度。這裏是HTML/CSS代碼：與Twitter的全身背景Bootstrap

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='UTF-8'> 
     <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> 
     <title>Bootstrap Issue</title> 
     <style> 
      body { background: black; } 
      .container { background: white; } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <h1> Hello, World!</h1> 
     </div> 
    </body> 

</html>

我怎樣才能讓身體佔據整個屏幕？

來源

2011-09-27 GSto

您需要可以補充一點：

html { background: transparent }

或者，設置html的「頁面背景」（background: black）來代替，這是很好的事情。

爲什麼？內部引導，還有就是：

html,body{background-color:#ffffff;}

（切記默認background值爲transparent）

欲瞭解更多信息，爲什麼這個問題，請參閱：What is the difference between applying css rules to html compared to body?

注意，這不再是一個問題與Bootstrap 3+。

來源

2011-09-27 13:14:49 thirtydot

據推測，他已經爲背景重寫了bootstraps顏色。 –

@EvanCarroll：是的，但並不適合他。你不瞭解這個問題所問的問題。 – thirtydot

在CSS中設置html和body的高度爲100％。

html, body { height: 100%; }

然後它應該工作。問題在於，身體的高度自動計算爲內容的高度，而不是整個屏幕的高度。

來源

2011-09-27 12:18:08

這幾乎可以工作，但是如果您有一個填充頂部：60px（以防止導航欄出現在頂部的容器上），則會在底部創建60px的額外高度，背景。我們如何在css中做「100％-60px」？ – aalaap

編輯：這是可以使用jQuery - $（「body」）.css（「height」，（$（window）.height（） - 60）+「px」）;有沒有人有一個純粹的CSS方法來實現這一目標？ – aalaap

html，body {height：100％; height：100％;/*確定這是首先*/ 最小高度：100％; } – DrewRobertson93

/*這裏是一個純CSS的解決方案*/

<style type="text/css"> 
     html, body { 
     height: 100%; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     } 

     #full-screen-background-image { 
     z-index: -999; 
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto; 
     position: fixed; 
     top: 0; 
     left: 0; 
     } 

     #wrapper { 
     position: relative; 
     width: 800px; 
     min-height: 400px; 
     margin: 100px auto; 
     color: #333; 
     } 

     a:link, a:visited, a:hover { 
     color: #333; 
     font-style: italic; 
     } 

     a.to-top:link, 
     a.to-top:visited, 
     a.to-top:hover { 
     margin-top: 1000px; 
     display: block; 
     font-weight: bold; 
     padding-bottom: 30px; 
     font-size: 30px; 
     } 

    </style> 
    <body> 
    <img src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
    <p>Content goes here...</p> 
    </div> 
</body>

來源

2013-06-07 02:33:17

它適合我，謝謝！ – Juck

<style> 
     body { background: url(background.png); } 
     .container { background: ; } 
</style>

如果你想讓它

來源

2013-07-01 21:37:28 cflo

最好的解決辦法是

.content{ 
    background-color:red; 
    height: 100%; 
    min-height: 100vh; 
}

這個工程的背景圖像的在自舉中自動獲取veiwport高度（vh）。

來源

2015-08-03 05:49:54

與Twitter的全身背景Bootstrap

回答

相關問題