하위 요소가 상위 상위에 비례하는 백분율을 얻는 방법

Question

div 부모 컨테이너 안에 div를 스택해야합니다. 부모 div 컨테이너는 하위 컨테이너이거나 상위 컨테이너 안에 있습니다.

제 문제는 div를 픽셀로 스태킹 할 때 모든 것이 정상입니다. 그러나, 만약 내가 아래 div 또는 스택 사이에 때로는 내가 느슨한 픽셀을 슬립해야합니다. 나는 그것이 0.3232 픽셀을 가질 수 없다는 것을 알고 있으며 나는 소수점 이하의 픽셀을 잃어 가고 있다고 가정하고있다.

나는 var PIXELS_PER_FOOT = 25로 상수 세트를 가지고 있습니다;

다음과 같은 구조를 갖는 경우 어떻게 상위 요소에 비례하여 하위 요소의 비율을 설정할 수 있습니까?

<div id="superParent" height='500px'  OR 20 Feet  > 



    <div id="anotherParent" height="300px" OR 12 Feet  > 


    <div id="aChild" height=If this div is 3 Feet 
          I need to get the percentage of 3 foot from 20 foot and   
           apply        
           that percentage to its parent or     
           what I am calling the anotherParent 


    </div> 
    </div> 

그래서 3/20 = 15 % 인 경우. 나는 12/20 = 60 %를 얻고 싶습니다. 그리고 이것은 내가 잃어버린 곳입니다. aChild 요소에 15 %를 적용하는 것은 부모가 숫자가 아니기 때문에 정확하지 않습니다. 주 백분율을 얻는 것입니다.

저는 이것을 위해 jQuery를 사용할 수 없습니다.

Answer 1

내 루프에서 각 객체의 픽셀이 상위 높이를 기준으로 위에서 아래로 설정되므로 루프의 어느 위치에 있더라도 상관 없으므로 항상 부모 픽셀에 액세스 할 수 있습니다. 비율을 얻으려고 시도하기 전에 자식 객체의 높이를 설정하는 한 자식 객체의 비율을 설정하는 방법.

this.heightPercent = (this.heightPixels/that.parent.size.heightPixels) * 100;