绝对定位元素不随可滚动内容延伸（过去100％）

Question

我有一个弹出窗口，其中一个名为fade的元素应该扩展到屏幕的整个宽度（当没有可滚动的内容时它会这样做）。但是，当内容超过浏览器窗口的100％时，它不会扩展到页面高度的100％。

如果我设置html, body { height: 100%; overflow-y: hidden; }我得到了我想要的结果，但是我在右侧得到了2个滚动条。

http://jsfiddle.net/Dpqg5/

HTML

<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>

CSS

#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }

有关如何使这个元素完全扩展到Web浏览器高度的任何想法，即使有更多可滚动的内容？

Answer 1

将你的淡入淡出css设置为：

#fade { 
  display: none;
  background-color: rgba(0,0,0,0.5); 
  position: fixed; 
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}