放大网页时出现问题

Question

当我放大和缩小页面时，元素变得很奇怪。

除了容器div（在图像背景上覆盖颜色）之外，其他所有内容都可以正常工作。 放大或转到移动设备时，div不会像应有的那样继续到达页面底部。 相反，它在底部显示背景图像而没有图像覆盖。

码：

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url(../img/d2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

HTML：

<div id="container">
    <div class="block">
         Content
    </div>       
</div>

我已经在叠加层上尝试了100％height属性，但是它不起作用。 对于移动设备，这也是一个特别的问题。

Answer 1

问题可能出在您执行此操作的方式上，css将容器显示为高度和宽度为100％，但是（取决于您对html的结构方式），容器只会占到100％浏览器窗口，而不是网页本身。

Answer 2

我认为按照Oscar的建议修复CSS是一个很好的起点。 进行更改后，看起来一切正常，但是我对此问题尚不清楚。

#container {
  height:100%;
  width:100%;
  position: relative;
  background-color: rgba(0,0,0,.5);
  position: fixed;
}

body {
  background-image: url('http://www.wallpick.com/wp-content/uploads/2013/11/Smokey-Abstract-Wallpaper-Wallpaper-HD.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

JSFiddle