绝对定位的元素不与滚动内容（过去的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; 
}