两个文本框与底部对齐，第二个文本框可以长大并推动第一个div

Question

我有两个文本框必须与父div的底部对齐。第二个div可以改变他的身高，然后它会推动第一个div。

我的两个问题是：

• 将div与底部对齐
• 第二个div增长时推动第一个div

解释Img：

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