两个文本框对齐到底部，第二个可以长大并推动第一个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>