Html 两个文本框底部对齐，第二个文本框可以向上延伸，并将第一个div向上推

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

我的两个问题是：

• 将两个div与底部对齐
• 当第二个div增长时，向上推第一个div

解释Img：

---

将

div

s包装在容器中，并使用

position:absolute

和

bottom:0

我为您创建了一个工作示例。单击按钮以增加较低div的高度，并自行检查

$（“.btn”）。单击（函数（）{
$（“.second div”）.height（parseInt（$（.second div”）.height（），10）+10）；
});
.parent{
背景颜色：灰色；
位置：相对位置；
宽度：200px；
高度：200px；
}
.btn{
高度：20px；
背景色：#fff；
边缘顶部：20px；
文本对齐：居中；
光标：指针；
}
.集装箱{
位置：绝对位置；
底部：0；
宽度：200px；
}
.第一组{
高度：30px；
宽度：200px；
背景颜色：蓝色；
}
.第二组{
高度：20px；
宽度：200px；
背景色：红色；
}

单击以增加高度
用htmltry发布您的完整代码，为我们提供一段可用（甚至不可用）的html代码，在这种情况下，我不能只使用JavaScript HTML5+CSS3，谢谢你的回复anyway@Danychijavascript已经被用来向您显示，在改变
seconddiv
的高度时，它会自动调整。其目的是为了演示。你不需要它。只需使用html结构和css。我现在就尝试了，它工作得很好，我在第二部分使用了height auto。感谢您的回答@nashcheez不知道为什么我投了反对票。@Danychi，因为您没有代码的工作示例。SO的人可能非常客观和无情。我会在将来记住这一点，再次感谢：）
.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%;
}