Question

我正在尝试使用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>

如何让身体占据整个屏幕？

Answer 1

您需要添加以下内容：

html { background: transparent }

或，在background: black上设置“页面背景”（html），这样做很好。

为什么呢？在Bootstrap里面，有这个：

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

（请记住，默认background值为transparent）

有关重要原因的详细信息，请参阅：What is the difference between applying css rules to html compared to body?

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

Answer 2

在CSS中将html和body的高度设置为100％。

html, body { height: 100%; }

然后它应该工作。问题是身体的高度自动计算为内容的高度，而不是整个屏幕的高度。

Answer 3

/ *这里是纯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>

Answer 4

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

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

Answer 5

最佳解决方案是

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

它会在引导程序中自动获取veiwport高度（vh）。

全身背景与Twitter Bootstrap

5 个答案: