html - 背景图片仅在内容位于 div 中时出现

Question

我希望带有背景图像的 div 覆盖整个浏览器窗口。我还有另一个包含内容的 div。当内容 div 中的内容充满数据(即填满浏览器窗口)时，图像显示完整。当我清空 div 的内容时，图像仅部分可见(内容 div 的高度)。随着内容被添加到内容 div，更多的图像出现。这是 html:

 <div class="whole">
 <div class="content"> 
    <p>the more content in here, the more of the image is shown</p>
 </div>
 </div>

这是CSS:

 .whole {
 background: url(tree.jpg) no-repeat center center fixed;

 background-size: cover;
 width:100%;
height:100%;
  }

 .content {
 text-align: center;
 font-family: 'Open Sans', sans-serif;
 color: #fff;
 margin: 40px auto;
background: rgba(22,22,22, 0.5);
width: 100%;
max-width: 960px;
border-radius: 5px;
 padding-bottom: 32px;

}

无论内容 div 中有多少内容，如何使整个类的 div 中的图像占据整个浏览器窗口？谢谢

Answer 1

设置html的宽高，

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

.whole {
  background: url(http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=55) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  margin: 40px auto;
  background: rgba(22, 22, 22, 0.5);
  width: 100%;
  max-width: 960px;
  border-radius: 5px;
  padding-bottom: 32px;
}

<div class="whole">
  <div class="content">
    <p>the more content in here, the more of the image is shown</p>
  </div>
</div>