In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height.
If I set
html, body { height: 100%; overflow-y: hidden; }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; }
Does anyone have suggestions on how to make the fade element extend fully to the height of the web browser even when there's more scrollable content?