如何获得子元素与超级父元素成比例的百分比

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;