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

Question

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

问题是动态高度，否则我很容易将负高度设置为底部值。现在我只是设置了一个很大的负数像素作为底值，但它不是很好并且不能很好地解决问题。 (从逻辑上讲，这发生在小数字上:fiddle)希望下面的示例可以阐明我尝试做的事情。

我正在考虑使用转换，但我也没有找到解决方案。

当然我可以用 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

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

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

另请查看 support tables用于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>