将具有动态高度的 div 移出其父容器

Question

我正在尝试将高度动态变化的 div 从其父 div 中移出并移回。

问题是动态高度，否则我可以轻松地将负高度设置为底部值。 现在我只是将大量负数像素设置为底部值，但这不是很好，也不能正确解决问题。 （逻辑上这发生在少数人身上：fiddle） 希望下面的示例能够阐明我尝试做的事情。

我正在考虑使用 transforms 代替，但我也没有找到解决方案。

当然，我可以用 JavaScript 做到这一点，但作为每个人我更喜欢纯 CSS 解决方案 :)

#outer {
    position: relative;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}

#inner {
    position: absolute;
    bottom: -500px;
      /*
        It's working but ugly and not perfect.
        The value I need would be the height of the inner div, but it is dynamic
      */
    width: 100%;
    background: red;
    transition: 0.4s;
}

#outer:hover #inner {
    transition: 0.4s;
    bottom: 0;
}

<div id="outer">
    <div id="inner">
        Some expanding text here
    </div>
</div>  

Answer 1

如果我理解您的问题，您可以为其正常状态和:hover 状态设置max-height 并转换它。但是，您必须将其设置为您知道将始终足够高的 max-height（这可能会导致随机速度，具体取决于内容的数量）。

类似：JS Fiddle

.outer {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    background: black;
    overflow: hidden;
}
.inner {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: red;
    transition: 0.4s;
    max-height: 0;
    overflow: hidden;

}
.outer:hover .inner {
    transition: 0.4s;
    bottom: 0;
    max-height: 40px;
}

否则，我会推荐一个 JS 解决方案。

Answer 2

您可以使用 CSS transform:translateY(100%) 属性，因此高度是根据元素本身计算的。然后在悬停时将值重置为0。

检查元素，您将能够准确地看到它的高度和位置。

还可以查看support tables for transform，并在必要时添加前缀。

Updated JsFiddle

.outer {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: grey;
    overflow: hidden;
}
.inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: aqua;
    transition: 0.4s;
    transform: translateY(100%);
}
.outer:hover .inner {
    bottom: 0;
    transform: translateY(0);
}

<div class="outer">
    <div class="inner">Some expanding text here..</div>
</div>