Position元素的

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具有高度「自動」應該第一個孩子後，開始立即

3. thirdChild有絕對的位置，但如果secondChild的高度增加thirdChild應該自動下推。

例如firstChild的身高的25％; secondChild的身高擴大了40％左右; 所以thirdChild應該開始頂= 65％（則firstChild的25％的高度和40％secondChild的高度）

Answer 1

您可以使用jQuery像這樣

$(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移動你的DIV

PS：我固定則firstChild錯字