Question

＆＃13;

请检查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>

＆＃13;

.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;
}

＆＃13;

我想要实现的是

firstChild的绝对位置高度为25％
secondChild有身高＆＃39; auto＆＃39;应该在第一个孩子之后立即开始
thirdChild有绝对位置，但如果第二个孩子的身高增加，第三个孩子应该自动按下。

例如firstChild的身高25％; 第二儿童的身高增加了约40％; 所以thirdChild应该开始最高= 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：我修复了第一个儿童错字

元素的位置

1 个答案: