32

Twitter の Bootstrap フレームワークを使用して新しいプロジェクトに取り組もうとしていますが、問題が発生しています。全身の背景が欲しいのですが、背景はコンテナ div の高さに制限されているようです。HTML/CSS コードは次のとおりです。

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

ボディを画面全体に表示するにはどうすればよいですか?

4

5 に答える 5

37

これを追加する必要があります：

html { background: transparent }

または、代わりに「ページの背景」（background: black）をオンに設定します。これで問題ありません。html

なんで？Bootstrapの内部には、次のものがあります。

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

（デフォルトbackground値はtransparent）であることに注意してください。

これが重要である理由の詳細については、「本文と比較して、HTMLにCSSルールを適用することの違いは何ですか？」を参照してください。

これはBootstrap3+では問題ではなくなったことに注意してください。

于 2011-09-27T13:14:49.937 に答える
8

CSS で html と body の高さを 100% に設定します。

html, body { height: 100%; }

その後、動作するはずです。問題は、 body の高さが、画面全体の高さではなく、コンテンツの高さになるように自動的に計算されることです。

于 2011-09-27T12:18:08.507 に答える
5

/* これは純粋な 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-07T02:33:17.980 に答える
0

最善の解決策は

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

ブートストラップで veiwport height(vh) を自動的に取得します。

于 2015-08-03T05:49:54.297 に答える