我没有详细阅读所有内容，但我最近遇到了这个问题，我采取了以下措施：

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

这允许你有一个div，它首先显示高达200px的内容，悬停时它的大小至少与div的整个内容一样高。div不会变成3000px，但3000px是我强加的限制。确保在非：悬停上进行转换，否则可能会出现一些奇怪的渲染。这样：hover继承自非：hover。

从px到%或自动转换不起作用。您需要使用相同的度量单位。

我意识到这条线索已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新。

还可以只获取/设置元素自身的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

我只是为<li>元素设置动画，而不是为整个容器设置动画：

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0；高度为0。

你可以，用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>

人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div>

我的解释是，动画运行需要明确的高度。当高度（起始高度或结束高度）为自动时，无法获得高度动画。

可以通过使用片段路径创建反向（塌陷）动画来实现这一点。

#子0{显示：无；}#parent0:悬停#child0{显示：块；动画：高度动画；动画持续时间：200ms；动画计时功能：线性；动画填充模式：向后；动画迭代次数：1；动画延迟：200ms；}@关键帧高度动画{0% {剪辑路径：多边形（0%0%，100%0.00%，100%0%，0%0%）；}100% {剪辑路径：多边形（0%0%，100%0.00%，100%100%，0%100%）；}}<div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

此解决方案使用了一些技术：

填充底部：100%“hack”，其中百分比是根据元素的当前宽度定义的。有关此技术的更多信息。浮动收缩包装，（需要额外的div来应用浮动清除黑客）非语义使用https://caniuse.com/#feat=css-编写模式和一些转换来撤销它（这允许在垂直上下文中使用上面的填充黑客）

结果是，我们只使用CSS实现了高性能的转换，并使用一个转换函数来平滑地实现转换；圣杯！

当然，这也有缺点！我无法确定如何控制内容被截断的宽度（溢出：隐藏）；由于衬垫底部的裂缝，宽度和高度密切相关。不过，也许有办法，所以我们会回到过去。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

正文{填充：1em；}.触发器{字号：粗体；}/*.扩展器仅用于浮动清除*/.扩展器：：之后{内容：“”；显示：表格；清晰：两者都有；}.外部{float：左；/*目的：收缩以适应内容*/边框：1px实心绿色；溢出：隐藏；}.内部{过渡：填充底部0.3s，方便进出；/*或者你能想出的任何疯狂的转换函数*/底部填充：0%；/*填充百分比是根据宽度定义的。此级别的宽度等于内容的高度*/高度：0；/*不幸的是，书写模式的改变还有其他的不良影响，比如光标的方向*/写入模式：垂直rl；光标：默认值；/*不需要垂直文本（横向工字梁）*/变换：旋转（-90度）平移X（-100%）；/*撤消写入模式*/变换原点：0 0；边距：0；/*此处的左/右边距将增加高度*/}.inter>div｛white-space:nowrap；｝.extender:hover.intern，/*在展开时保持打开*/.t触发器：悬停+扩展器.内部{填充底部：100%；}<div class=“trigger”>HoverMe</div><div class=“扩展器”><div class=“outer”><div class=“inner”><div>第一项</div><div>内容</div><div>内容</div><div>内容</div>＜div＞长内容不能宽于外部高度，不幸的是＜/div＞<div>最后一项</div></div></div></div>＜div＞在内容之后</div></div>