Question

固定高度的div包含的内容多于其可以包含的内容。当处于非活动状态（鼠标不悬停在其上）时，此div的高度为100px，内容的底部可见。

当此div悬停时，内部的所有内容都应向下滑动并显示。我尝试了很多方法来实现这一点，使用top和bottom声明，使用max-height并使用其他方法。
注意：里面的内容是未知的/变化的高度

然而，到目前为止，我所有的方法都没有成功地创造出所需的效果。

以下是我的一种方法的链接：
http://jsfiddle.net/fLuHL/
它向上滑动而不是向下滑动。

Answer 1

我不确定这是否是你所追求的，但...... updated fiddle here

我向css添加了top个属性。

Answer 2

由于转换不考虑height = auto，我通常使用translateY来达到同样的效果。

以下是代码：http://jsfiddle.net/5oL3gf7n/

我只将代码的CSS更改为：

.post-container {
display: block;
height: auto;
position: relative;
margin-top: 0;
z-index: 496;
transition: transform .5s;
    -moz-transition: transform .5s;
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
transform: translateY(calc(100px - 100%));
}

.text {                        
background-color: #666 !important;
padding: 20px;
}

.post-container:hover {
transform: translateY(0);
}

高度：100px到auto之间CSS转换的麻烦

2 个答案: