父子 div 的位置：绝对。如何让子 div 占据页面 100% 的宽度和高度？答案

【问题标题】：Parent and child divs both position: absolute. How to make child div take up 100% width and height of page?父子 div 的位置：绝对。如何让子 div 占据页面 100% 的宽度和高度？
【发布时间】：2013-08-31 14:34:37
【问题描述】：

我正在尝试制作一个灯箱样式的 Jquery 函数。不幸的是，包含我想要弹出和放大的图像 div (.lightboxbackground) 的 .container div 有 position:absolute 和 z-index: 10 所以我的弹出框和背景推子只占用了它的宽度和高度父 (.container) div 例如：

有没有人知道解决这个问题的方法，以便我的 .lightboxbackground 和 .lightbox div 可以覆盖整个屏幕？

<div class='container'>

  <div class='lightboxbackground'>
    <div class='lightbox'>
      <img src='image.jpg'/>
    </div>
  </div>

</div>

.container {
  position: absolute;
  z-index:10;
  width: 200px;
  height: 200px;
}


.lightboxbackground {
    background-color:#000;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: 11;
}

.lightbox {
  width: 500px;
  height: 500px;
  position:absolute;
  z-index: 12;
}

【问题讨论】：

ok.. 为什么要将容器限制为 200x200？不是说不应该，只是我在这个例子中没有看到原因
.container 是干什么用的？
你可以做position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 20;

标签： javascript jquery css html

【解决方案1】：

如果你想覆盖整个屏幕：

.lightboxbackground {
    background-color:#000;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position:fixed;
    left:0;
    top:0;
    z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}

fid：http://jsfiddle.net/uH4MF/1/

【讨论】：

为什么不把容器的宽度和高度设为 100%？
因为它只会吃掉只有 200x200 px 的父级
...我的意思是.. 为什么将父级限制为 200x200？
不错的一个.. 我认为仅使用 css 是不可能的。 :)
@Mr_Green 我对这个样本的主要问题是，如果上面有任何元素，它将显示出来。最好将此技巧与z-index: 1000 之类的东西一起使用：)

【解决方案2】：

.container 是他们的“参考框架”，可以这么说。 .container 的后代的 100% 宽度和高度意味着 200px。

此外，还有一种方法可以达到 100% 的高度。其中之一是在html 和body 上显式定义height，以便您可以参考。

所以：

将.container 放置为body 的子级
```
<body>
  <div class="container">...
```
删除.container的width和height
添加如下样式：
```
html, body, .container {height:100%};
```

【讨论】：

如果没有特殊原因需要 3 层.. 为什么不将 .container 和 .lightboxbackground 结合起来？
@user1600124 向 OP 询问。我只是根据提供的代码来回答。