带有 Twitter Bootstrap 的全身背景答案

【问题标题】：Full body background with Twitter Bootstrap带有 Twitter Bootstrap 的全身背景
【发布时间】：2011-11-26 00:05:56
【问题描述】：

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

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

最好的解决办法是

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

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

【讨论】：

【解决方案2】：

您需要添加以下内容：

html { background: transparent }

或者，改为在html上设置“页面背景”（background: black），这样就可以了。

为什么？在 Bootstrap 内部，有这样的：

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

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

有关此问题的更多信息，请参阅：What is the difference between applying css rules to html compared to body?

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

【讨论】：

大概，他已经为背景覆盖了引导颜色。
@EvanCarroll：是的，他是，但这对他不起作用。你没有理解这个问题所问的问题。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

html, body { height: 100%; }

那么它应该可以工作。问题是 body 的高度会自动计算为内容的高度，而不是整个屏幕的高度。

【讨论】：

这几乎可以工作，但是如果你有一个 padding-top:60px （以防止导航栏出现在顶部的容器上），这会在底部创建一个 60px 的额外高度，这没有得到背景。我们如何在 css 中做到“100%-60px”？
编辑：这可以使用 jQuery - $("body").css("height", ($(window).height()-60)+"px");有没有人有纯 CSS 方法来实现这一点？
html, body{ 高度: 100%; /* 确保这是第一个 */ min-height: 100%; }