Jquery 在HTML中使div从底部浮动

我试图看看是否有可能从下到上浮动HTMLDOM元素，而不是通常的从上到下的方法

通过这种方法，我试图做的是当一个div元素被放置在另一个div元素的顶部时，如果我们实时隐藏顶部元素，我希望底部元素向下浮动，而不是向上浮动

这是一把工作小提琴，如果你点击“隐藏红色”，你可以看到底部的蓝色元素向上浮动。我曾尝试在css中使用

vertical align:bottom

，但没有成功

还有其他css方法可以让这个功能正常工作吗？

像这样

css

#inner2{
    height:80%;
    background:blue;
    vertical-align:bottom;
position:absolute;
    bottom:0;
    width:100%;
}

---

使用

display:table cell

和

vertical align:middle

使用外层应用

位置：绝对

，因为

表格单元格

无法与绝对位置正确对齐

HTML

<div class="wrapper">
  <div class='outerContainer'>
    <div id='inner1'></div>
    <div id='inner2'></div>
  </div>
</div>

---

您可以解决此设置

.outerContainer, .outerContainer div {
    -webkit-transform: scaleY(-1);    
    transform: scaleY(-1);    
}

（并拆下对齐底部。）

它使容器可以翻转，但物品会再次翻转，使其朝上

---

您也可以通过flex系统实现这一点，但在旧浏览器中的支持很弱。

所以您希望

blue

保持在它的位置，而不向上移动？？？这是一个短期修复方案。如果我有两个以上的内部div怎么办。。这个解决方案将失败。。正确的？

.outerContainer, .outerContainer div {
    -webkit-transform: scaleY(-1);    
    transform: scaleY(-1);    
}