CSS 叠加 div 未拉伸到文档高度

Question

我有一个使用 JavaScript 附加到文档的覆盖元素。 这是它的样式声明：

#overlay_mask {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

它的大小正确地延伸到窗口的高度，但是当用户滚动时，覆盖层不会跟随。

html和body元素设置为width: 100% ； 和height: 100% 。 覆盖层是文档的第一个子元素。

Answer 1

你可以试试position:fixed; . 叠加层仍将仅拉伸到您的窗口大小，但即使用户滚动它也会保持原位。

Answer 2

要以百分比形式使用高度：

1. 设置文档类型。

    <!doctype html>

2. 确保您已经以百分比形式给出了 parent 和html , css height 。

    html, body { width: 100%; height: 100%; }

   仅当父元素具有定义的高度，即不是auto值。 如果它有100%高度，则也必须定义父级的父级高度。 这可能会持续到html根元素。