灯箱背景色应使用CSS覆盖整个屏幕

Question

这是我的页面URL

http://sample.com/mytest.php

在这个页面上，如果我们点击“登录”按钮，将显示一个带有黑色背景的弹出窗口。但是如果我们缩小页面，则会减小背景颜色的大小。但是我想要在缩小页面时覆盖整个屏幕背景。我在我的页面中使用了以下代码。

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
} 

但在一个测试页面中，下面的代码用于覆盖整个背景。它能很好地发挥作用。

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

我不知道如何为我的登录页面背景做同样的事情。 请有人帮助我解决这个问题。

- Rithu

---

你是如何放置登录表单的div的？它在表格内吗？ - SubRed

如果我将高度设为200％，它只会停止在标题上方的背景。 - Rithu

建议：尽量避免这种情况：40个请求 ❘ 855.30KB传输 | DOMContentLoaded: 1.9分钟 - Tomas Ramirez Sarduy

Answer 1

尝试

div.fullscreen{
    position:fixed
    ...
}

absolute: 元素相对于其第一个定位（非静态）祖先元素进行定位
fixed: 元素相对于浏览器窗口进行定位

- Pieter Willaert

---

哦，好的。它正常工作了。非常感谢您的答案。我现在非常高兴。再次非常感谢您。 - Rithu

Answer 2

你需要把下面的代码放在body标签的结尾之前或者开头之后。

<div class="black_overlay" id="fade" style="display: block;"></div>

- Sandip Makwana

---

不。这应该覆盖整个 div。 - Rithu

Answer 3

您需要将弹出窗口和背景移动到任何其他块元素的外部，可能只需放在</body>之前。背景会拉伸以填充其容器（即表格单元格）的100％，而不是整个页面。这意味着您需要更改位置（左右）。

- qooplmao

Answer 4

问题在于div.black_overlay在表格内，所以你无法使用widht:100%和height:100%。只需将div.black_overlay移出表格，并添加z-index: 1;即可。我已经使用Firebug测试过了，它可以正常工作！

- Tomas Ramirez Sarduy