CSS 带有 Twitter Bootstrap 的全身背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7568931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full body background with Twitter Bootstrap
提问by GSto
I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
我正在尝试使用 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>
How can I get the body to take up the entire screen?
我怎样才能让身体占据整个屏幕？
回答by thirtydot
You need to either add this:
您需要添加以下内容：
html { background: transparent }
Or, set the "page background" (background: black) on htmlinstead, which is fine to do.
或者，将“页面背景”( background: black)设置为开启html，这很好。
Why? Inside Bootstrap, there's this:
为什么？在 Bootstrap 里面，有这个：
html,body{background-color:#ffffff;}
(bear in mind the default backgroundvalue is transparent)
（请记住，默认background值为transparent）
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
有关为什么这很重要的更多信息，请参阅：与正文相比，将 css 规则应用于 html 有什么区别？
Note that this is no longer an issue with Bootstrap 3+.
请注意，这不再是 Bootstrap 3+ 的问题。
回答by Ben Clayton
Set the height of html and body to be 100% in the CSS.
在 CSS 中将 html 和 body 的高度设置为 100%。
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
那么它应该工作。问题是 body 的高度会自动计算为内容的高度，而不是整个屏幕的高度。
回答by LAOMUSIC ARTS
/* here is a pure CSS solution */
/* 这是一个纯 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>
回答by cflo
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
如果需要，这适用于背景图像
回答by Bharat Parmar
best solution would be
最好的解决办法是
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.
它在引导程序中自动获取 veiwport 高度（vh）。
