Question

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

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

一直在寻找和尝试各种各样的事情，但没有找到任何解决方案。这是一个显示问题的jsfiddle：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

我似乎无法获得绝对定位的内部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>

Answer 2

您忘了在position: relative;上设置.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>

用绝对内容填充相对容器

2 个答案: