html - 如何在不添加文本的情况下使 div 背景可见

Question

我有一个具有以下 css 属性的主包装器 div：

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
}

我想让整个 div 和它的背景可见，即使 div 本身是空的。

我不想使用position:fixed或者position:absolute如果可能的话。

Answer 1

除非您在父容器中设置高度，否则您的高度#mainWrapper将计算为 0，您将看不到背景图像或颜色。

将高度设置为 100px 以仔细检查您的图像是否正确加载。

如果您想使用相对高度，请确保您的 body 和 html 标签的高度为 100%。

Answer 2

可能是你的HTMLorbody元素不够大。height:100%只会填充父容器的高度，因此请尝试将其添加到您的 CSS 中：

html, body 
{
    height:100%;
}

http://jsfiddle.net/unt9M/使用单色背景演示了这一点。删除我上面描述的 CSS，你会看到 div 只是单行，因为 body 和 HTML 不够大。

Answer 3

添加：

body,html{
  height:100%;
}

见http://jsfiddle.net/derekstory/xU2g9/

请注意，我添加了背景颜色来显示示例。

Answer 4

你的父母有任何风格和吗？widthheight

如果父母是body这样尝试：

CSS

html,body{
    width:100%;
    height:100%;
}

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
    background-size: cover;
}

JSFiddle

Answer 5

我只是添加了一个浮点数：

div#mainWrapper {
  margin: auto;
  width:70em;
  height:100%;
  background: url(../images/header.jpg) no-repeat center center fixed;
  background-size: cover;

  float: left/right;
}