我有一个弹出窗口,其中一个名为 fade
的元素应该扩展到屏幕的整个宽度(当没有可滚动内容时它会这样做)。但是,当内容超过浏览器窗口的 100% 时,它不会扩展到页面高度的 100%。
如果我设置 html, body { height: 100%;溢出-y:隐藏; }
我得到了我想要的结果,但随后在右侧出现了 2 个滚动条。
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; }
关于如何让这个元素完全扩展到网络浏览器的高度,即使有更多可滚动内容,有什么想法吗?
最佳答案
将淡入淡出的 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;
}
关于javascript - 绝对定位元素不随可滚动内容扩展(过去 100%),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21818478/