Относительное расположение div?

Question

У меня проблема с получением относительного div для стека ниже абсолютного div.

Существует видео, который масштабирует его высоту на основе ширины браузера, я тогда должен был получить ДИВ позиционировать себя непосредственно под ним, используя абсолютную позицию, я смог добиться этого с .contain

Мне тогда нужно сделать так, чтобы я мог разместить другие divs ниже этого .contain. С скрипкой я пытаюсь установить зеленую полосу, расположенную относительно (.para1) ниже установленного абсолютного значения (.contain). Я мог бы использовать отрицательный запас, чтобы быстро исправить проблему, но тогда, когда вы размещаете больше divs ниже .para1, я должен иметь одинаковый запас ниже каждого из них.

Вот скрипка для полной иллюстрации: http://jsfiddle.net/L232uhpr/

Код в вопросе:

HTML:

<div class="contain"> 
     <div class="divider"> 
      <div class="txt_wrap"> 
       <p class="center_h1">WHAT I DO</p> 
      </div> 
     </div> 
    </div> 
    <div class="para1"> 
     <div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png"> 
     </div> 
    </div> 

CSS:

/*divider*/ 
.contain .divider { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding-bottom: 10px; 
    z-index: -1; 
} 
.divider{ 
    width: 100%; 
    height: 100px; 
    background-color: #ccc; 
} 
.txt_wrap{ 
    width: 160px; 
    margin-left: 45%; 
} 
/*Parallax 1 Styling*/ 
.para1{ 
    width: 100%; 
    height: 100px; 
    position: relative; 
    background: green; 
} 

Answer 1

Я думаю, что имея padding-bottom:10px удалив его, вы получите желаемый результат

.contain .divider { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    /* padding-bottom: 10px; */ 
    z-index: -1; 
} 

Пожалуйста, проверьте http://jsfiddle.net/L232uhpr/2/

Answer 2

Вы можете добавить там обивка дно в CSS поэтому удалите его:

.contain .divider { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    /* padding-bottom: 10px; */ 
    /* z-index: -1; */ 
}