javascript - 绝对定位元素不随可滚动内容扩展(过去 100%)

Question

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

如果我设置 html, body { height: 100%;溢出-y:隐藏； } 我得到了我想要的结果，但随后在右侧出现了 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; }

关于如何让这个元素完全扩展到网络浏览器的高度，即使有更多可滚动内容，有什么想法吗？

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;
}