放大網頁時出現問題

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