CSS转换为＆＃34;高度：50px＆＃34;和＆＃34;身高：汽车＆＃34;

Question

我有一个具有默认固定高度和overflow:hidden属性的DIV，用于隐藏要包含在其中的广泛内容。

div
{
  height:50px;
  overflow:hidden;
}

我想自动扩展这个用鼠标悬停它的DIV，但我有一个问题， CSS过渡仅适用于固定高度而不是自动高度。

这里有JsFiddle，说明了两种情况。

我知道原因是因为某种原因，眉毛不知道＆＃34; 有多少px是自动高度＆＃34;但是是否存在一种解决方法（可能使用max-height属性...）以避免需要jQuery？

Answer 1

当您在动画中提供height: auto时，它不知道该怎么做。因为它无法动态计算height。所以，用这种方式用jQuery初始化高度：

$(function () {
  $(".auto_height").each(function () {
    $(this).data("height", $(this).height());
  });
});

在CSS中，给：

height: attr(data-height);