Twitterのブートストラップを使用した全身の背景

TwitterのBootstrapフレームワークを使用して新しいプロジェクトを作成しようとしていますが、問題が発生しています。私は全身の背景が欲しいですが、背景はコンテナdivの高さに制限されているようです。ここにHTML/CSSコードがあります：Twitterのブートストラップを使用した全身の背景

<!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?

注意をブートストラップ3+で問題が発生しました。

出典

2011-09-27 13:14:49 thirtydot

おそらく、彼はすでにバックグラウンドのブートストラップカラーをオーバーライドしています。 –

@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 { 高さ：100％;/*これが最初であることを確認します*/ min-height：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のブートストラップを使用した全身の背景

答えて

関連する問題