兩個文本框對齊到底部，第二個可以長大並推動第一個div

Question

我有兩個文本框必須對齊到父div的底部。第二個div可以改變他的身高，然後它會推動第一個div。

我的兩個問題是：

• 對準兩格的底部
• 推第一個div起來的時候第二個div增長

說明圖：

.parent{ 
    width: 100%; 
    position: relative; 
    height: 500px; 
} 
.div1{ 
    width: 100%; 
    position: relative; 
} 
.div2-helper{ 
    height: 150px; 
    width: 100%; 
    position: relative; 
} 
.div2{ 
    width: 100%; 
    position: relative; 
    transform: translateY(-100%); 
    top: 100%; 
} 

Answer 1

包裹div個容器內，並使用position: absolute和bottom: 0

我已經爲您創建一個工作示例。點擊按鈕增加下方div的高度並檢查自己。

$(".btn").click(function() { 
 
    $(".second-div").height(parseInt($(".second-div").height(), 10) + 10); 
 
});

.parent { 
 
    background-color: grey; 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.btn { 
 
    height: 20px; 
 
    background-color: #fff; 
 
    margin-top: 20px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.container { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 200px; 
 
} 
 
.first-div { 
 
    height: 30px; 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 
.second-div { 
 
    height: 20px; 
 
    width: 200px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="btn">Click to increase height 
 
    </div> 
 
    <div class="container"> 
 
    <div class="first-div"> 
 

 
    </div> 
 
    <div class="second-div"> 
 

 
    </div> 
 
    </div> 
 
</div>