将div与底部对齐而不将其从流中移除

Question

我需要将div对齐父div的底部。您可以告诉我使用position: absolute;和bottom: 0px;，但我无法从流中删除div。

我的HTML标记如下所示：

<div class=parent>
    <div class=child>
        Lorem ipsum dolor sit amet
    </div>
</div>

父div具有动态高度。有时，它显示所有内容（高度：自动;），但有时，它有一个固定的高度，小于孩子的高度。在这种情况下，我希望孩子到达顶部边缘的父母之外。孩子总是height: auto;符合其内容，我在设计时也不知道。

我所尝试的是在子div上使用position: absolute;和bottom: 0px;，但是这会将孩子从流中移除;因此，父div在height: auto;处于活动状态时将无法显示其内容。我也尝试在父级上使用display: table-cell;和vertical-align: bottom;，但这似乎无法让它的高度小于内容。

如果没有任何帮助，我仍然可以尝试JS解决方案，但我确信无论如何都必须使用纯CSS，即使我需要修改我的HTML并插入包装div或其他东西。

Answer 1

这是怎么回事？

.parent {
    margin-top:-16px;
    background-color: gold;
    height: 88px;
    position:relative;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
    transition:1s all;
    z-index:-1;
}
.down {
    -webkit-transform:translateY(0);
    transform:translateY(0);
}

$(".header").click(function () {
    $(".parent").toggleClass('down');
});

Demo

您也可以使用容器Demo

隐藏标题上方的溢出

正如Linek所提到的，不支持转换的浏览器只会显示内容。为了在不使用设定高度或将其从流量中取出的情况下到达它们，您必须过度估计元素的高度并使用负margin-top。 This demo应解决IE8中的问题