Css 全身背景和推特引导_Css_Twitter Bootstrap

Css 全身背景和推特引导

css twitter-bootstrap

Css 全身背景和推特引导,css,twitter-bootstrap,Css,Twitter Bootstrap,我正在尝试使用Twitter的引导框架进行一个新项目，但我遇到了一个问题。我想要一个完整的背景，但背景似乎仅限于容器div的高度。下面是HTML/CSS代码： <!doctype html> <html lang="en"> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1

我正在尝试使用Twitter的引导框架进行一个新项目，但我遇到了一个问题。我想要一个完整的背景，但背景似乎仅限于容器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>


引导问题
正文{背景：黑色；}
.container{背景：白色；}
你好，世界！

如何使正文占据整个屏幕？

在CSS中将html和正文的高度设置为100%

html, body { height: 100%; }

那么它应该会起作用。问题是，主体的高度会自动计算为内容的高度，而不是整个屏幕的高度

您需要添加以下内容：

html { background: transparent }

或者，改为在

html

上设置“页面背景”（

background:black

），这样做很好

为什么?？在Bootstrap内部，有以下内容：

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

（请记住默认的

背景

值为

透明

）

有关这一点的更多信息，请参阅：

请注意，这不再是Bootstrap 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>


html，正文{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
#全屏背景图像{
z指数：-999；
最小高度：100%；
最小宽度：1024px；
宽度：100%；
高度：自动；
位置：固定；
排名：0；
左：0；
}
#包装纸{
位置：相对位置；
宽度：800px；
最小高度：400px；
保证金：100像素自动；
颜色：#333；
}
a:链接，a:已访问，a:悬停{
颜色：#333；
字体：斜体；
}
a、 到顶部：链接，
a、 到顶部：访问，
a、 到顶部：悬停{
利润上限：1000px；
显示：块；
字体大小：粗体；
填充底部：30px；
字体大小：30px；
}
内容在这里


正文{background:url（background.png）；}
.container{背景：；}

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

最好的解决方案是

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

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

这几乎可以实现，但如果您有一个填充顶部：60px（以防止导航栏出现在顶部的容器上方），则会在底部创建一个60px的额外高度，而不会获得背景。我们如何在css中实现“100%-60px”？编辑：这可以使用jQuery-$（“body”）.css（“height”，（$（window.height（）-60）+“px”）；有没有人有一个纯CSS的方法来实现这一点？html，body{height:100%；/*确保这一个是第一个*/min height:100%；}大概，他已经覆盖了背景的引导颜色。@EvanCarroll:是的，但这对他不起作用。你不理解这个问题所问的问题。

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