javascript - 元素位置

请检查活塞
    https://plnkr.co/edit/rXyZqkPeJyF2GHhbQrDn?p=preview

 <div class="parent">
  <div class="firsrChild">
    Header
  </div>
  <div class="secondChild">
    a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/>
  </div>
  <div class="thirdChild">

  </div>
</div>

.parent{
  width : 100%;
  height : 100%;
  overflow : auto;
  border : 1px solid red;
  position : absolute ;
}

.firsrChild{
  position : absolute;
  top :0;
  height : 25%;
  background-color : yellow;
  width : 100%;
  border : 1px solid blue;
}

.secondChild{
  position : relative;
  height : auto;
  width : 100%;
  background-color : gray;
  border : 1px solid green;
  top :25;
}

.thirdChild{
  position:absolute;
  height : 30%;
  width : 100%;
  top : 50%;
  background-color : red;
  border : 1px solid yellow;
}

我想要达到的是


firstChild的绝对位置高度为25％
secondChild的身高“自动”应在第一个孩子之后立即开始
thirdChild具有绝对位置，但是如果secondChild的高度增加，thirdChild应该自动向下推。


例如firstChild的身高25％；
   secondChild的身高扩大了大约40％；
   因此，thirdChild应该从顶部开始= 65％（firstChild的高度为25％，secondChild的高度为40％）

最佳答案

您可以使用JQuery通过这样的简单脚本移动DIV

$(document).ready(function() {
  var topSecond = $('.firstChild').height() + $('.firstChild').position().top;
  $('.secondChild').css({top: topSecond});
  console.log(topSecond);
  var topThird = topSecond + $('.secondChild').height();
  $('.thirdChild').css({top: topThird});
  console.log(topThird);
});

我更新your plunker here

ps：我修正了firstChild错字