用绝对含量填充相对容器

Question

我正在使用particles.js，并试图用绝对定位的粒子内容填充相对部分。

我遇到的问题是，相对部分的高度是动态的，我似乎无法让绝对定位的内部div只填充相对容器。

一直在寻找和尝试各种事情，但没有找到任何解决办法。下面是一个提示问题的提示：http://jsfiddle.net/awwester/3f6vkef7/1/

<div class="container">
    <div class="inner">
    </div>
</div>

.container {
    height: 200px;
    background-color: red;
}
.inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
}

Answer 1

您忘记在.container上设置.container，因此.inner应用于body/html

​

.container {
    height: 200px;
    background-color: red;
    position: relative;
} 
.inner {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
}

<div class="container">
    <div class="inner">
    </div>
</div>

​

Answer 2

我似乎无法让绝对定位的内部div只填充相对容器。

关键是将属性position: relative添加到容器中。

尝试以下示例：

​

.container {
  height: 200px;
  background-color: red;
  position: relative;
}
.inner {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<div class="container">
  <div class="inner">
  </div>
</div>

​