Видимость position

[Raura]

Здравствуйте форумчане!!! Подскажите реально такое сделать.

Допустим есть такой код

 

<div class='div'>

   <div class='div_1'></div>

   <div class='div_2'></div>

</div>

 

.div{

background-color: green;

display: inline-block;

padding: 10px;

position: relative;

}

.div_1{

width: 100px;

height: 100px;

background-color: yellow;

float: left;

}

.div_2{

width: 50px;

height: 300px;

background-color: red;

float: left;

position: absolute;

top: 0;

right: 0;

}

 

Если применить к .div_2 свойства position; absolute;, блок .div перестает видеть его, то есть не растягивается по вертикали следом за .div_2. Можно ли сделать так что б блок .div_2 с примененным к нему свойством position был виден для блока .div .  

Edited August 16, 2014 by Raura

[fireman691]

попробуй для .div_2 height в процентах задавать.

[Raura]

попробуй для .div_2 height в процентах задавать.

 

Высота блока .div_2 здесь роли не играет. Если да же применить position к блоку div_1 то блок .div пропадет. 

Нужно сделать вот так 

без применения float и display: inline-block;

Edited August 17, 2014 by Raura

[Raura]

Если кому интересно, то вот скрипт js решающий данную проблему

 

var offsetTopDiv_1 = document.getElementsByClassName('div_1')[0].offsetTop;

var offsetTopDiv_2 = document.getElementsByClassName('div_2')[0].offsetTop;

 

var heightDiv_1 = document.getElementsByClassName('div_1')[0].offsetHeight;

var heightDiv_2 = document.getElementsByClassName('div_2')[0].offsetHeight;

 

var sumDiv_1 = offsetTopDiv_1 + heightDiv_1;

var sumDiv_2 = offsetTopDiv_2 + heightDiv_2;

 

if( sumDiv_1 > sumDiv_2){

   document.getElementsByClassName('div')[0].style.height = sumDiv_1 + 'px';

}else{

   document.getElementsByClassName('div')[0].style.height = sumDiv_2 + 'px';

};