Единица измерения относительно ширины или высоты элемента

Question

У меня всегда есть это сомнение.

Когда мы используем, например, width: 50%, этот 50% относится к ширине его родителя.

Например я есть этот код

<div id="root"> 
    <div id="child"> 

    </div> 

    <div id="child2"> 

    </div> 
</div> 

и этот CSS

#root{ 
    width: 200px; 
    height: 100px; 
    background-color: red; 
} 

#child{ 
    width: 50%; 
    height: 20px; 
    background: yellow; 
} 

#child2{ 
    width: 50px; 
    height: 20px; 
    background: green; 
} 

http://jsfiddle.net/3EKzj/

Если #root имеет ширину 200px, #child имеет ширину 100px ...

но возможно ли это, что ширина #child составляет 50% от ширины #child2 (25px), используя любое свойство или функцию css?

Я знаю, что в transform: translate(50%,25%) 50% относительно собственных элементов ширины и 25% собственного элемента высоты, так что возможно, что с любой функцией я могу получить ширину или высоту других элементов?

Спасибо!

Answer 1

№ Не без JavaScript. CSS не имеет возможности применять свойства одного элемента к другому, кроме как через наследование.

Update
С помощью JavaScript, решение выглядит следующим образом:

var child = document.getElementById('child'); 
var child2 = document.getElementById('child2'); 

child.style.width = (child2.clientWidth/2) + 'px';