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）

有关为什么这很重要的更多信息，请参阅：将 css 规则应用于 html 与 body 有什么区别？

请注意，这不再是 Bootstrap 3+ 的问题。

于 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 
<style>
      body { background: url(background.png); }
      .container { background: ; }
</style>

如果需要，这适用于背景图像

于 2013-07-01T21:37:28.657 回答
0

最好的解决方案是

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

它在引导程序中自动采用 veiwport 高度（vh）。

于 2015-08-03T05:49:54.297 回答