Question

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

#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

以百分比形式使用高度：

设置doctype。
```
<!doctype html>
```
确保以百分比的形式给出了父级和html，css height。
```
html, body {
  width: 100%;
  height: 100%;
}
```
仅当父元素具有已定义的高度，即不是auto的值时。如果它具有100%高度，则也必须定义父亲的父高度。这可以直到html根元素。

CSS叠加div不会拉伸到文档高度

2 个答案:

以百分比形式使用高度：