заполнить относительный контейнер с абсолютным содержанием

Question

Я использую particle.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

вы забыли установить position: relative; на .container так .inner применяются к телу/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>