요소의 너비 또는 높이에 상대적인 단위

Question

나는 항상이 의심을 가지고있다.

예를 들어 width: 50%을 사용하면이 50 %는 부모의 너비와 관련이 있습니다. 이 코드

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

    </div> 

    <div id="child2"> 

    </div> 
</div> 

및 #root는 200 픽셀의 폭을 갖는

#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/

경우이 CSS를 가지고 예를 들어

, #child가 100 픽셀 폭을 갖는다 ...

은

하지만 너비가 #child은 CSS 속성 또는 함수를 사용하여 #child2 (25px) 너비의 50 %입니까?

내가 알고있는 것은 transform: translate(50%,25%)에서 50 %는 자신의 너비 요소에 상대적이고 25 %는 높이 요소에 비례하므로 다른 요소의 너비 또는 높이를 얻을 수있는 기능이 있습니까?

감사합니다.

Answer 1

아니요 JavaScript가 없어도됩니다. CSS는 한 요소의 속성을 상속을 통해가 아닌 다른 요소에 적용 할 수있는 방법이 없습니다. 자바 스크립트와

업데이트
이 솔루션은 다음과 같습니다

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

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