css - CSS覆盖div没有拉伸到文档高度

翻译自：https://stackoverflow.com/questions/13532894 2012-11-23T16:38:11.770

2632 次

1

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

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

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

和元素设置为html; 和。覆盖是文档的第一个孩子。bodywidth: 100%height: 100%

2 回答 2

6

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

于 2012-11-23T16:40:27.017 回答

0

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

设置文档类型。
```
<!doctype html>
```
确保你已经给了父级和html, cssheight的百分比。
```
html, body {
  width: 100%;
  height: 100%;
}
```
仅当父元素具有定义的高度时，即不是auto. 如果它有100%高度，那么也必须定义父级的父级高度。这可以一直到html根元素。

于 2012-11-23T16:39:52.883 回答