javascript - 元素的位置

Question

请检查plunker 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;
}

我想要实现的是

1. firstChild 的绝对位置为高度的 25%

2. secondChild 的高度为“auto”，应在第一个 child 之后立即开始

3. thirdChild 有绝对位置，但如果 secondChild 的高度增加，thirdChild 应该自动下推。

例如第一个 child 的高度 25%； secondChild 的高度增加了大约 40%； 所以 thirdChild 应该开始 top = 65%(firstChild 的 25% 高度和 secondChild 的 40% 高度)

Answer 1

您可以使用 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

p.s: 我修正了 firstChild 的拼写错误