使Divs从HTML的底部漂浮

Question

我正在尝试查看是否可以从底部到顶部浮动html dom元素，而不是通常的上下方法。

通过这种方法，我要做的是将一个div元素放在另一个方法的顶部，如果我们隐藏了一个实时的一个实时，我希望底部的底部向下漂浮在底部本身，而不是漂浮。

这是一个工作的小提琴，http://jsfiddle.net/6xg87/1/，如果单击"隐藏红色"，则可以看到底部的蓝色元素浮动。我在CSS中尝试了vertical-align:bottom，但这无效。

是否还有其他CSS方法可以使此功能正常工作？

Answer 1

喜欢这个

演示

demo1

CSS

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

Answer 2

您可以解决此设置

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

（并删除对齐底部。）。

它使容器被颠倒，但是这些物品逆转了，以使它们面向上向上

小提琴

您也可以使用Flex系统获得此功能，但是较旧的浏览器的支持很弱。

Answer 3

使用display:table-cell和vertical-align:middle

尝试一下

使用外层应用position:absolute，因为table-cell不会与绝对位置正确对齐。

html

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

CSS

.wrapper{
       position:absolute;
        bottom:0;
        left:100px;
    }
    .outerContainer{
        width:20px;
        height:200px;
        position:relative;
        display:table-cell;
        vertical-align:bottom;
        border:aqua 1px solid
    }

demo