将具有动态高度的 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 的 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>

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

Move div with dynamic height out of its parent container

html

css

height

overflow